使用按鈕檢查兩個或多個無線電組

Question

我一直在尋找解決方案，並嘗試了許多不同的方法，希望有人能為我提供幫助-而且我被困住了！

這個小提琴也可能證明

我的代碼是

 $("#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> 

我要做的是單擊一個按鈕，然后檢查下面的兩個相關單選按鈕。

我是新來的，因此不勝感激-謝謝！

Answer 1

問題是您的輸入具有相同的名稱屬性。

順便說一句，我改變了另外兩件事：

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

Answer 2

試試這個可能會解決您的問題：-

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