Dynamische Optionsfeld-Werte ändern sich durch Klicken auf ein anderes Optionsfeld

Question

Ich habe gleiche div mehrere Male.Wenn ich auf "Herr" Radio-Button im ersten Div-Feld klicken, sollte letzte Div-Radio-Button Wert als "männlich" ändern Hier mein Code.Es ist Ändern aller div-Werte als "männlich" .Wie ändere ich das zugehörige Formular Gender-Radio-Button-Wert beim Klicken auf den Titel Radio Button. Bitte helfen Sie mir jemand.

<?php 
    for($i=1;$i<=$totalchilds;$i++){ 
    ?> 
     <div class="primary Applicant-details"> 
      <h3>Tourist Details </h3> 
      <div> 
       <label>Title : </label> 
       <input type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked> 
       Mr 
       <input type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs"> 
       Mrs </div> 
      <div> 
       <label for="fname">Name</label> 
       <input type="text" name="c_name_<?= $i ?>" placeholder="child name"> 
      </div> 
      <div> 
       <label for="lname">Age</label> 
       <input type="text" name="c_age_<?=$i?>" placeholder="Enter child age"> 
      </div> 
      <div> 
       <label>Gender : </label> 
       <input type="radio" class="gender" name="c_gender_<?=$i?>" value="M" checked> 
       Male 
       <input type="radio" class="gender1" name="c_gender_<?=$i?>" value="F"> 
       Female </div> 
     </div> 

    <?php }?> 

Answer 1

Um diesen Gutscheincode das Geschlecht Optionsfeld in der gleichen div Verwendung zu ändern:

$('.gender').click(function(){ 
    $(this).closest('.Applicant-details').find('.gender').prop('checked',true); 
}); 
$('.gender1').click(function(){ 
    $(this).closest('.Applicant-details').find('.gender1').prop('checked',true); 
}); 

Die Struktur des Codes nicht sehr optimal ist. Benennen Sie den Titel von Geschlecht zu Titel um. Benennung der Radiobuttons Geschlecht und Gender1 ist nicht besser. Aus Usability-Sicht macht es zudem wenig Sinn, dass beide Selektionen denselben Wert haben.

Answer 2

Sie können jQuery verwenden. Es gibt verschiedene Methoden, um dies zu erreichen. Dies ist einer von ihnen. Gehen Sie Ihre ID und den Wert von html wie folgt aus:

<div> 
    <label>Title : </label> 
    <input onclick="changeGender(<?=$i?>, 'M')" type="radio" class="gender" name="c_genderinfo_<?=$i?>" value="Mr" checked> 
    Mr 
    <input onclick="changeGender(<?=$i?>, 'F')" type="radio" class="gender1" name="c_genderinfo_<?=$i?>" value="Mrs"> 
    Mrs 
</div> 

Und Skript:

function changeGender(id, value) 
{ 
    $("input[name=c_gender_"+id+"][value=" + value + "]").prop('checked', true); 
}