使用按钮检查两个或多个无线电组

use buttons to check two or more radio groups

本文关键字：两个 无线电 按钮 检查      更新时间：2023-09-26

我希望有人能帮助我，因为我已经寻找了一个解决方案，并尝试了许多不同的事情-我卡住了!

这个小提琴也可以演示

我的代码是 

$("#button_1").click(function() {
  $("INPUT[name=type]").val(['1']);
});
$("#button_2").click(function() {
  $("INPUT[name=type]").val(['2']);
});
$("#button_3").click(function() {
  $("INPUT[name=type]").val(['3']);
});
<button id="button_1">check both blue radios</button>
<button id="button_2">check both red radios</button>
<button id="button_3">check both yellow radios</button>
<br>
<br>
<div id='type'>
  <label for="radio_1">blue dial</label>
  <input type='radio' id='radio_1' name='type' value='1' />
  <label for="radio_2">red dial</label>
  <input type='radio' id='radio_2' name='type' value='2' />
  <label for="radio_3">yellow dial</label>
  <input type='radio' id='radio_3' name='type' value='3' />
</div>
<br>
<br>
<div id='type'>
  <label for="radio_1">blue strap</label>
  <input type='radio' id='radio_1' name='type' value='1' />
  <label for="radio_2">red strap</label>
  <input type='radio' id='radio_2' name='type' value='2' />
  <label for="radio_3">yellow strap</label>
  <input type='radio' id='radio_3' name='type' value='3' />
</div>

我要做的是点击一个按钮并检查下面相关的两个单选按钮。

我是新来的，所以任何帮助都会很感激-谢谢!

试试这个可能会解决你的问题:-

<form>
    <fieldset id="group1">
        <input type="radio" value="" name="group1">
        <input type="radio" value="" name="group1">
    </fieldset>
    <fieldset id="group2">
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
        <input type="radio" value="" name="group2">
    </fieldset>
</form>

问题是您的输入具有相同的name属性。

顺便说一下，我改变了另外两个东西:

  • ID属性ID属性必须唯一!即使你不使用它

  • 用户使用jQuery .prop()函数设置/取消checked属性

    $("#button_1").click(function() {
	$('input[value="1"]').prop('checked', true);
});
$("#button_2").click(function() {
  $('input[value="2"]').prop('checked', true);
});
$("#button_3").click(function() {
  $('input[value="3"]').prop('checked', true);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button_1">check both blue radios</button>
<button id="button_2">check both red radios</button>
<button id="button_3">check both yellow radios</button>
<br>
<br>
<div id='type'>
  <label for="dial_1">blue dial</label>
  <input type='radio' id='dial_1' name='dial' value='1' />
  <label for="dial_2">red dial</label>
  <input type='radio' id='dial_2' name='dial' value='2' />
  <label for="dial_3">yellow dial</label>
  <input type='radio' id='dial_3' name='dial' value='3' />
</div>
<br>
<br>
<div id='type'>
  <label for="strap_1">blue strap</label>
  <input type='radio' id='strap_1' name='strap' value='1' />
  <label for="strap_2">red strap</label>
  <input type='radio' id='strap_2' name='strap' value='2' />
  <label for="strap_3">yellow strap</label>
  <input type='radio' id='strap_3' name='strap' value='3' />
</div>

相关文章：