Question

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

<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中具有相同名称和值的无线电

我该怎么做？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

此外，我添加了javascript以选择相同的radia按钮vise-e-versa。

＆＃13;

$('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');
})

＆＃13;

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

＆＃13;

Answer 5

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

$('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>

jQuery找到动态输入名称

5 个答案: