Consente di modificare il contenuto dopo aver selezionato un button di opzione utilizzando jQuery

Come posso risolvere il problema? Vorrei cambiare il contenuto di ciascun button di scelta se è stato selezionato. Inoltre, come posso impostare il button di selezione predefinito predefinito?

$(".option-detail").hide(); $(".option").click(function() { $(this).next('div').slideToggle(this.checked); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li> <input type="radio" class="option">Option 1 <div class="option-detail">Some content here</div> </li> <li> <input type="radio" class="option">Option 2 <div class="option-detail">Some content here</div> </li> <li> <input type="radio" class="option">Option 3 <div class="option-detail">Some content here</div> </li> </ul> </div> 

Spec. Rilevanti – 17 Forme / 17.2.1 Tipi di controllo

I pulsanti di radio sono come le caselle di controllo, tranne che quando più condividono lo stesso nome di controllo, escludono reciprocamente : quando si è commutati "on", tutti gli altri con lo stesso nome vengono commutati "off".

Pertanto, gli elementi radio devono condividere un attributo di nome comune affinché essi siano reciprocamente esclusivi.

 <input type="radio" name="group" class="option"> 
 $(':input').on('change', function() { $(".option-detail").slideUp(); $(this).parent('label').next('div').slideToggle(this.checked); }); 

Cambiamenti che ho fatto:

  • Ho avvolto gli elementi di input con elementi di label per aumentare l'usabilità. Facendo così, è ansible fare clic sul text o sul button di scelta per triggersre un evento di modifica.
  • Ho cambiato l'evento da click per change .
  • Ho scivolato tutti gli elementi di .option-detail each volta che un evento viene sparato. Facendo così, viene visualizzata una sola volta.

Se si desidera che un button di opzione sia selezionato di default, aggiungere l'attributo checked .

 <input type="radio" name="group" class="option" checked> 

o

 <input type="radio" name="group" class="option" checked="checked"> 
 $(".option-detail").hide(); $(':input').on('change', function() { $(".option-detail").slideUp(); $(this).parent('label').next('div').slideToggle(this.checked); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul> <li> <label><input type="radio" name="group" class="option" checked>Option 1</label> <div class="option-detail">Some content here</div> </li> <li> <label><input type="radio" name="group" class="option">Option 2</label> <div class="option-detail">Some content here</div> </li> <li> <label><input type="radio" name="group" class="option">Option 3</label> <div class="option-detail">Some content here</div> </li> </ul> </div>