jQuery查找动态输入名称答案

【问题标题】：jQuery find dynamic input namejQuery查找动态输入名称
【发布时间】：2016-08-22 22:04:19
【问题描述】：

我有一个带有单选按钮的简单表单

<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>

而且我有额外的 div 与相同的收音机（没有形式）

<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

当我在 DIV 中检查收音机时，我想在 FORM 中制作具有相同名称和值的收音机

我该怎么做？

【问题讨论】：

使用 jQuery，选择 div 输入：$("div input[type='radio']") 然后向它们添加一个 click 方法，当您单击这些单选按钮时，它会检查所有其他单选按钮，将名称和值与其他单选按钮进行比较，并检查如果他们匹配的话。

标签： javascript jquery html

【解决方案1】：

附加一个 change() 事件处理程序，然后使用 attribute equals selector 获取表单中的相应元素并使用 prop() 方法设置它的检查属性。

$('.attributes :radio').change(function() {
  $('form [name="radio_1"][value="' + this.value + '"]').prop('checked', this.checked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="radio_1" value="1" />Radio 1
  <input type="radio" name="radio_1" value="2" />Radio 2
  <input type="radio" name="radio_1" value="3" />Radio 3
</form>

<div class="attributes">
  <input type="radio" name="radio_1" value="1" />Radio 1
  <input type="radio" name="radio_1" value="2" />Radio 2
  <input type="radio" name="radio_1" value="3" />Radio 3
</div>

【讨论】：

【解决方案2】：

使用此代码：

$(".attributes :radio").on("change",function(){

$("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));

})

最终代码：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <input type="radio" name="radio_1" value="1" />Radio 1
            <input type="radio" name="radio_1" value="2" />Radio 2
            <input type="radio" name="radio_1" value="3" />Radio 3
        </form>
        <div class="attributes">
            <input type="radio" name="radio_1" value="1" />Radio 1
            <input type="radio" name="radio_1" value="2" />Radio 2
            <input type="radio" name="radio_1" value="3" />Radio 3
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $(".attributes :radio").on("change",function(){
                   $("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));
               })
            })
        </script>
    </body>
</html>

【讨论】：

【解决方案3】：

应该这样做！ 它将与演示中演示的多组复选框一起使用。

    $('div :radio').change(function() {
        $('form :radio[name="' + this.name + '"][value="' + this.value + '"]').prop('checked', true);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
  
  <br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</form>

<div class="attributes">
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
    <br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</div>

【讨论】：

【解决方案4】：

有几种方法可以做到这一点，但简单的方法是根据名称和值制作选择器。

$('input[type="radio"]').on("change", function () {
     $('input[type="radio"][name="'+this.name+'"][value="'+this.value+'"]').prop("checked", true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>


<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

【讨论】：

【解决方案5】：

您可以使用<lable> 标签并添加引用单选按钮标识符的for 属性。如下所述

我还为选择相同的弧形按钮添加了 javascript，反之亦然。

$('form input[type="radio"], attribute input[type="radio"]').click(function(){
  //alert($(this).attr('name')+"::"+$(this).attr('value'));
 $('input[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').not(this).trigger('click');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" id="radio_11" value="1" /><label for="radio_11" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_12" value="2" /><label for="radio_12" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_13" value="3" /><label for="radio_13" >Radio 1</label>
</form>

<div class="attributes">
<input type="radio" name="radio_1" id="radio_21" value="1" /><label for="radio_21" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_22" value="2" /><label for="radio_22" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_23" value="3" /><label for="radio_23" >Radio 1</label>
</div>

【讨论】：