嘿,我对以下代码有两个问题。
首先,当我选中第 3 个复选框时,它会自动选中第 2 个,我只希望我自己选中它(就像我选中第 2 个复选框时一样)。 第二个问题是我无法在选中复选框后取消选中它。
var cbs = document.getElementsByName("test");
function demo(obj) {
var hzp = cbs[1];
var ht = cbs[2];
for (var i = 0; i < cbs.length; i++) {
if(cbs[i].value == hzp.value || cbs[i].value === ht.value) {
if(cbs[i].value == obj.value) {
if(cbs[i].checked && hzp.checked || ht.checked) {
hzp.checked = true;
ht.checked = true;
}
}
}
cbs[i].checked = false;
}
obj.checked = true;
}
checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01" onClick="demo(this)">
checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02" onClick="demo(this)">
checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03" onClick="demo(this)">
checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04" onClick="demo(this)">
答案 0 :(得分:1)
e.target.value==cbs[0].value ?
如果点击输入的值为 demo01
cbs[3].checked=false
将 demo04 设置为 false
: e.target.value==cbs[3].value
否则如果点击输入的值为 demo04
? cbs[0].checked=false
将 demo01 设置为 false
: null
别的,没什么...
var cbs = document.getElementsByName("test")
cbs.forEach( test => {test.addEventListener("change", (e) => {
e.target.value==cbs[0].value ? cbs[3].checked=false : e.target.value==cbs[3].value ? cbs[0].checked=false : null
})
})
checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01" >
checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02">
checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03">
checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04">
答案 1 :(得分:0)
仔细看 - 这不是 jQuery。
这简化了您更大的工作 - 使复选框像单选按钮一样工作。现在,您应该能够非常轻松地添加逻辑,使其完成您想要的其余工作。
基本思想是:
一个。单击任何复选框时捕获
湾存储选中的复选框值
C。缓存复选框本身(以便我们可以将其重新打开)
d.取消选中所有复选框
e.重新检查用户刚刚检查的那个。
F。使用存储的值更新 div / 变量
现在,只需添加一些额外的(例如storedVal)变量来跟踪额外的复选框。
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
var storedVal = '';
$$('input').forEach((el) => {
el.addEventListener('click', function(e){
storedVal = e.target.value;
let ckcb = e.target;
uncheckAll();
ckcb.checked = true;
console.log(storedVal);
$('#msg').innerText = storedVal;
});
});
const uncheckAll = () => {
$$('input').forEach((el) => {
el.checked = false;
});
}
#msg{
position:absolute;
top:70px;
right:30px;
font-size:2rem;
padding:10px;
background:wheat;
}
checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01">
checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02">
checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03">
checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04">
<div id="msg"></div>