动态单选按钮值通过单击另一个单选按钮更改答案

【问题标题】：Dynamic radio button values change by clicking another radio button动态单选按钮值通过单击另一个单选按钮更改
【发布时间】：2016-07-26 10:03:41
【问题描述】：

我有多次相同的 div。如果我单击第一个 div 字段中的“先生”单选按钮应该将最后一个 div 单选按钮的值更改为“男性”这是我的代码。它将所有 div 值更改为“男性”。如何单击标题单选按钮时，我是否更改相关表单性别单选按钮的值。请任何人帮助我。

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

【问题讨论】：

标签： php jquery html

【解决方案1】：

要更改同一 div 中的性别单选按钮，请使用以下代码：

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

代码的结构不是很优化。将标题从 gender 重命名为 title。命名单选按钮 gender 和 gender1 也好不到哪里去。此外，从可用性的角度来看，具有相同值的两个选择没有多大意义。

【讨论】：

太棒了。它的工作。非常感谢。你节省了我的时间。

【解决方案2】：

您可以使用jQuery。有不同的方法可以实现这一点。这是其中之一。像这样从 html 传递您的 id 和值：

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

在脚本中：

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

【讨论】：