Question

我需要检查至少一个复选框，不知道它为什么不工作！请帮忙

ss=0;
for (i=0;i<=4;i++) 
{
if (document.f.cat[i].checked)

ss++; 
} 
if (ss==0){
alert("Please check at least one ");
return false;
}


> <p><input type="checkbox" name="cat1" value="ON">Art1     <input
> type="checkbox" name="cat2" value="ON">Art2   <input type="checkbox"
> name="cat3" value="ON">Art3   <input type="checkbox" name="cat4"
> value="ON">Art 4</p>

Answer 1

您可以使用 $('.checkbox input[type="checkbox"]:checked') 查找选中的复选框。

var btn = document.getElementById('check');
var msg = document.getElementById('checkedValue');
btn.addEventListener('click', function() {
  var len = document.querySelectorAll('.checkbox input[type="checkbox"]:checked').length
  if (len <= 0) {
    msg.innerHTML = "Please check at least one";
  } else {
    msg.innerHTML = "Your have checked <span style='color:red'>" + len + "</span> checkbox";
  }
})

body {
  font: 13px verdana
}

<p class="checkbox">
  <input type="checkbox" name="cat1" value="ON">Art1
  <input type="checkbox" name="cat1" value="ON">Art2
  <input type="checkbox" name="cat1" value="ON">Art3
  <input type="checkbox" name="cat1" value="ON">Art4
  <input type="button" name="check" id="check" value="Check">
</p>
<p id="checkedValue"></p>

Answer 2

请查看此脚本：

  <input type="checkbox" name="cat1" value="ON">Art1
  <input type="checkbox" name="cat1" value="ON">Art2
  <input type="checkbox" name="cat1" value="ON">Art3
  <input type="checkbox" name="cat1" value="ON">Art4
  <button type="button" onclick="checkValues()">Click</button>


    var validate = false;
     function checkValues() {
        $('input[type=checkbox]').each(function () {
           alert(this.checked);
           if(this.checked) {
             validate = true;
             return false;
           }
        });
     }

然后在

中处理validate

if(validate) {
   // do something
}

Answer 3

你的意思是这样的吗？

首先我会为每个元素分配一个唯一的ID。

<input type="checkbox" id="cat1" value="ON">Art1
<input type="checkbox" id="cat2" value="ON">Art2
<input type="checkbox" id="cat3" value="ON">Art3
<input type="checkbox" id="cat4" value="ON">Art4

var clicked = false;
for (i = 0; i <= 4; i++) {
  if($('#cat'+[i]).is(':checked'))  {
    clicked = true;
    return;
  }
}
if(clicked == false) {
  document.getElementById("cat"+[1]).checked;
}

Answer 4

在你的帖子中没有太多完整。我创建了以下场景来为您提供答案。

.box{
  border: 1px solid red;
  background-color:pink;
  padding: 10px;
}
    
.row {
    border: 1px solid #000;
}

JS：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div class="row" id="color">
  <div class="element">1</div>
</div>

</body>     
</html>

Answer 5

if(($("#checkboxid1").is(":checked")) || ($("#checkboxid2").is(":checked"))
                || ($("#checkboxid3").is(":checked"))) {
     //Your Code here
    }

您可以使用此代码来验证是否已选中至少一个复选框。

谢谢！

检查至少一个复选框javascript

5 个答案: