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>

我的新问题是，如果没有选中任何复选框，我该如何取消选择单选按钮？

Answer 1

这回答了你问题的补充。

请注意，我使用了几种不同的方法来选择复选框/单选按钮。实际上，有两种方法：一次选择all，并分别选择PD和ID。

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

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

This is a useful resource关于如何轮询（选择）不同类型的元素（例如，按ID，按类，作为一组等）。请注意，jQuery使用CSS选择器，因此学习它们两次是有用的。

＆＃13;

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

＆＃13;

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

＆＃13;

Updated jsFiddle Demo

Answer 2

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

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

如果您为两个复选框组分配不同的类名，则可以更轻松地确定要执行的操作。

以下是一个代码示例，包括堆栈代码段和jsFiddle Demo （因为它们更易于摆弄）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

一种简单的方法是在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>

如果在HTML / JavaScript

更新

4 个答案: