我需要使用 javascript 操作复选框的行为。它们基本上应该像单选按钮一样（一次只能选择一个，加上取消选择任何以前的选择）。
问题是我不能首先使用普通的单选按钮，因为每个单选按钮的名称属性都会不同。
我知道这不是让苹果看起来像梨的终极和最闪亮的解决方案，w3c 不会给我他们的拇指，但现在它会是一个更好的解决方案，而不是改变整个 cms 的核心 php 逻辑结构体 ;-）
任何帮助深表感谢！
使复选框的行为类似于使用 javascript 的单选按钮
IT技术
javascript
html
2021-02-18 03:53:30
6个回答
HTML :
<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>
jQuery ：
$(".chb").change(function() {
$(".chb").prop('checked', false);
$(this).prop('checked', true);
});
如果您希望用户可以取消选中所选项目：
$(".chb").change(function() {
$(".chb").not(this).prop('checked', false);
});
演示：
有很多方法可以做到这一点。这是一个包含多个复选框的 div的点击处理程序（纯 js）：
function cbclick(e){
e = e || event;
var cb = e.srcElement || e.target;
if (cb.type !== 'checkbox') {return true;}
var cbxs = document.getElementById('radiocb')
.getElementsByTagName('input'),
i = cbxs.length;
while(i--) {
if (cbxs[i].type
&& cbxs[i].type == 'checkbox'
&& cbxs[i].id !== cb.id) {
cbxs[i].checked = false;
}
}
}
这是一个工作示例。
我保持简单...
<html>
<body>
<script>
function chbx(obj)
{
var that = obj;
if(document.getElementById(that.id).checked == true) {
document.getElementById('id1').checked = false;
document.getElementById('id2').checked = false;
document.getElementById('id3').checked = false;
document.getElementById(that.id).checked = true;
}
}
</script>
<form action="your action" method="post">
<Input id='id1' type='Checkbox' Name ='name1' value ="S" onclick="chbx(this)"><br />
<Input id='id2' type='Checkbox' Name ='name2' value ="S" onclick="chbx(this)"><br />
<Input id='id3' type='Checkbox' Name ='name3' value ="S" onclick="chbx(this)"><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
这是一个更好的选择，因为它也允许取消选中：
$(".cb").change(function () {
$(".cb").not(this).prop('checked', false);
});
@DJafari 的回答不允许取消选中复选框。所以我更新了它：
$(".chb").change(function(e) {
//Getting status before unchecking all
var status = $(this).prop("checked");
$(".chb").prop('checked', false);
$(this).prop('checked', true);
//false means checkbox was checked and became unchecked on change event, so let it stay unchecked
if (status === false) {
$(this).prop('checked', false);
}
});