Question

嘿，我对以下代码有两个问题。

首先，当我选中第 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)">

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

Answer 2

仔细看 - 这不是 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>

当我检查另一个复选框时取消选中复选框

2 个答案: