如果在 HTML/JavaScript 中选中了复选框，则填充单选按钮
Populate radio button if checkbox is checked in HTML/JavaScript
我正在尝试编写一个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 的两个单选按钮......
希望随着项目的发展，您可以查看此答案并获得新的提示。
这是一个关于如何轮询（选择）不同类型的元素（例如，按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>更新的 jsFiddle 演示
如果为两个复选框组分配不同的类名，则更容易确定要执行的操作。
这是一个代码示例，既有堆栈代码片段，也有 jsFiddle 演示（因为它们更容易摆弄
）
$('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>不确定这是否有效，但应该让你知道该怎么做。如果需要，您还可以尝试在单选按钮和复选框上添加一些切换。
$(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)
}
});
});
一种简单的方法是在 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>
相关文章：
- 复选框/单选按钮-添加所选项目的总价
- 将文本框/单选按钮/和下拉列表中的信息添加到dataTable
- 如何防止jQuery中复选框单击时执行多个代码
- 如果用户未选中复选框或选择按钮，如何为复选框或单选按钮设置一些默认值
- 如何在更改节点 JS 表中的复选框时禁用按钮
- 如何使用 rails3-jquery-autocomplete 更新复选框/单选按钮
- IE issue-使用复选框/单选按钮时，jQuery.change(）不会触发回调
- 引导复选框/单选按钮不改变<输入>价值
- 在复选框单击中，更改可以单击的按钮
- 样式复选框&单选按钮
- 启用两个提交按钮上的复选框单击
- jQuery缓存刷新复选框单选按钮状态
- 基于复选框单选按钮调整总成本标价
- 自定义复选框/单选按钮，不用ID和FOR，也不用angular.js
- 单击复选框以禁用按钮
- 表单提交的复选框:点击按钮时显示错误
- 我如何有一个复选框/单选按钮张贴到一个文本区，当我点击提交按钮
- 如果我们在鼠标下移时设置preventDefault，然后双击文档，那么它就会阻止复选框/单选标签的默认行为
- Ipad复选框/单选按钮操作缓慢
- 如何在 JavaScript 中创建带有 3 个复选框/单选按钮作为选项的提示
