Dynamic radio button values change by clicking another radio button

I have same div multiple times.If I click on 'Mr' radio button in first div field should change last div radio button value as 'male' Here my code.It is changing all div values as 'male'.How do I change related form Gender radio button value when clicking the title radio button.Please anybody help me.

<?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 }?>

enter image description here

php jquery html
sagar

Answers 1

Submit Answer
  • Sunil Patel

    You can use jQuery. There are different methods to achieve this. This is one of them. Pass your id and value from html like this:

    <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>

    And in script:

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

Related Articles