我正在尝试编写一段 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>
我的新问题是，如果没有选中任何复选框，如何取消选择这两个单选按钮？
最佳答案
这回答了您的问题的补充。
请注意，我使用了几种不同的方法来选择复选框/单选按钮。其实有两种方法:一次全部选择，以及分别选择PD和ID。
然后，我展示了几种取消选择单选按钮的不同方法:页面上的所有单选按钮，通过指定每个 ID 来取消选择两个单选按钮...
希望，随着您的项目的发展，您可以查看此答案并获得新的提示。
This is a useful resource关于如何轮询(选择)不同类型的元素(例如按 ID、按类、作为组等)。请注意，jQuery 使用 CSS 选择器，因此学习它们会非常有用。
$('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>关于javascript - 如果在 HTML/JavaScript 中选中复选框，则填充单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36830562/