如果在 HTML/JavaScript 中选中了复选框，则填充单选按钮

Question

我正在尝试编写一个 JavaScript 代码，如果某个组中的任何复选框被选中，那么应该填充一个单选按钮。

以下是我正在处理的代码：

<html>
<head>
    <title>Radio buttons and checkboxes</title>
</head>

<body>
    <form>
        <h3>Radio Buttons</h3>
        <input type="radio" name="radio1" id="radio1"> Radio 1
        <br>
        <input type="radio" name="radio2" id="radio2">Radio 2
        <br>
        <br>

        <h3>Checkbox Groups</h3>

        <h4><u>Group 1</u></h4>
        <p align="center"><u>PD</u></p>
        <ul>
            <li><input type="checkbox" name="G1PD1">G1 PD1</li>
            <li><input type="checkbox" name="G1PD2">G1 PD2</li>
        </ul>
        <p align="center"><u>ID</u></p>
        <ul>
            <li><input type="checkbox" name="G1ID1">G1 ID1</li>
            <li><input type="checkbox" name="G1ID2">G1 ID2</li>
        </ul>

        <h4><u>Group 2</u></h4>
        <p align="center"><u>PD</u></p>
        <ul>
            <li><input type="checkbox" name="G2PD1">G2 PD1</li>
            <li><input type="checkbox" name="G2PD2">G2 PD2</li>
        </ul>
        <p align="center"><u>ID</u></p>
        <ul>
            <li><input type="checkbox" name="G2ID1">G2 ID1</li>
            <li><input type="checkbox" name="G2ID2">G2 ID2</li>
        </ul>
    </form>
</body>
</html>

这是我希望 JavaScript 执行的操作。如果选中第 1 组和第 2 组中 PD 部分下的任何复选框，则应填充单选按钮 Radio 1。同样，如果选中第 1 组和第 2 组 ID 部分下的任何复选框，则应填充单选按钮 Radio 2。

如何为此编写 jQuery 或 JavaScript 代码？

更新

使用@gibberish 的回答，我能够编写这个 JS 代码：

<script>
    $('input:checkbox').click(function(){
var cc = this.className;
if (cc=="pdcb"){
    $('#radio2').prop('checked',false);
    $('#radio1').prop('checked',true);
}else if (cc=="idcb"){
    $('#radio1').prop('checked',false);
    $('#radio2').prop('checked',true);
}
  else
  {
    $('#radio1').prop('checked',false);
    $('#radio2').prop('checked',false);
  }
});
</script>

我的新问题是，如果未选中 none 个复选框，我该如何取消选择两个单选按钮？

Answer 1

不确定这是否有效，但应该可以让您知道该怎么做.. 如果需要，您还可以尝试在单选按钮和复选框上添加一些切换。

$(document).ready(function() {    
     $(":checkbox").change(function () {
         if($(this).is(":checked")) {
             var selection = $(this).parent().parent().prev().text();
             if(selection == "PD") 
                 $("#radio1").prop("checked", true);
             else
                 $("#radio2").prop("checked", true)
         }    
     });
});

Answer 2

如果您为两个复选框组分配不同的类名，将更容易确定要做什么。

这是一个代码示例，包括堆栈代码片段和 jsFiddle Demo （因为它们更容易让您 fiddle 使用）

$('input:checkbox').click(function(){
 var cc = this.className;
 if (cc=="pdcb"){
  $('#radio2').prop('checked',false);
  $('#radio1').prop('checked',true);
 }else if (cc=="idcb"){
  $('#radio1').prop('checked',false);
  $('#radio2').prop('checked',true);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>

   <h3>Checkbox Groups</h3>

   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD1">G1 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD2">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G1ID1">G1 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G1ID2">G1 ID2</li>
   </ul>

   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD1">G2 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD2">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G2ID1">G2 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G2ID2">G2 ID2</li>
   </ul>
</form>

Answer 3

一种简单的方法是在 onclick 事件上调用函数，将单选控件 ID 作为参数传递。在您使用该函数编辑的代码下方。

<html>
<head>
    <script type="text/javascript">
        function checkRadio(checkBoxId) {
            var radio = document.getElementById(checkBoxId);
            if (!radio.checked)
                radio.checked = true;
        }

    </script>

    <title>Radio buttons and checkboxes</title>
</head>

<body>
    <form>
        <h3>Radio Buttons</h3>
        <input type="radio" name="radio1" id="radio1"> Radio 1
        <br>
        <input type="radio" name="radio2" id="radio2">Radio 2
        <br>
        <br>

        <h3>Checkbox Groups</h3>

        <h4><u>Group 1</u></h4>
        <p align="center"><u>PD</u></p>
        <ul>
            <li><input type="checkbox" name="G1PD1" onclick="checkRadio('radio1')">G1 PD1</li>
            <li><input type="checkbox" name="G1PD2" onclick="checkRadio('radio1')">G1 PD2</li>
        </ul>
        <p align="center"><u>ID</u></p>
        <ul>
            <li><input type="checkbox" name="G1ID1" onclick="checkRadio('radio2')">G1 ID1</li>
            <li><input type="checkbox" name="G1ID2" onclick="checkRadio('radio2')">G1 ID2</li>
        </ul>

        <h4><u>Group 2</u></h4>
        <p align="center"><u>PD</u></p>
        <ul>
            <li><input type="checkbox" name="G2PD1" onclick="checkRadio('radio1')">G2 PD1</li>
            <li><input type="checkbox" name="G2PD2" onclick="checkRadio('radio1')">G2 PD2</li>
        </ul>
        <p align="center"><u>ID</u></p>
        <ul>
            <li><input type="checkbox" name="G2ID1" onclick="checkRadio('radio2')">G2 ID1</li>
            <li><input type="checkbox" name="G2ID2" onclick="checkRadio('radio2')">G2 ID2</li>
        </ul>
    </form>
</body>
</html>

Answer 4

这回答了你的问题。

请注意，我使用了几种不同的 select 复选框/单选按钮方法。真的，有两种方法：select一次，selectPD和ID分开。

然后，我展示了几种不同的方法来取消select单选按钮：页面上的所有单选按钮，两个单选按钮都通过指定每个 ID...

希望随着项目的发展，您可以查看此答案并获得新的提示。

This is a useful resource 关于如何轮询 (select) 不同类型的元素（例如按 ID，按 class，作为一个组， ETC）。请注意，jQuery 使用 CSS select 或，因此学习它们是有用的。

$('input:checkbox').click(function(){
 var cc = this.className;
 if (cc=="pdcb"){
  $('#radio2').prop('checked',false);
  $('#radio1').prop('checked',true);
 }else if (cc=="idcb"){
  $('#radio1').prop('checked',false);
  $('#radio2').prop('checked',true);
 }
   //This is one way (gets them all)
   var num = $("[type='checkbox']:checked").length;
 alert(num);
 //This is another (gets each group)
 var lenPD = $('input[class=pdcb]:checked').length;
 var lenID = $('input[class=idcb]:checked').length;
 alert(lenPD +' / '+ lenID);
  
 //All three below methods work - choose your favorite
 //if (num==0) $('#radio1,#radio2').prop('checked',false);
 //if (lenPD==0 && lenID==0) $('input:radio').prop('checked',false);
 if (lenPD==0 && lenID==0) $('#radio1,#radio2').prop('checked',false);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>

   <h3>Checkbox Groups</h3>

   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD1">G1 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G1PD2">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G1ID1">G1 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G1ID2">G1 ID2</li>
   </ul>

   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD1">G2 PD1</li>
      <li>
         <input class="pdcb" type="checkbox" name="G2PD2">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input class="idcb" type="checkbox" name="G2ID1">G2 ID1</li>
      <li>
         <input class="idcb" type="checkbox" name="G2ID2">G2 ID2</li>
   </ul>
</form>

Updated jsFiddle Demo

如果在 HTML/JavaScript 中选中了复选框，则填充单选按钮

Populate radio button if checkbox is checked in HTML/JavaScript

html

javascript

checkbox

jquery

radio

更新