使用JavaScript检查并控制选中复选框的数量

我正在验证一些复选框，希望用户能够仅选择4个（可能从7个中选择），并在选中当前框（如果已选中3个）时禁用其他复选框，或者在未选中当前框时启用所有选项。我真的不确定问题出在哪里。这是我第一次使用JavaScript

function verify_selected(selected_check_box_id) {
    var count = 0;
    var selected_check_boxes = new Array();
    var check_boxes = new Array();
    var inputs = document.getElementsByTagName("input");
    for( var i in inputs ) {
        if( inputs[i].type == "checkbox" ) check_boxes.push( inputs[i] );
    }
    // get current checkbox
    for( var i in check_boxes ) if( check_boxes[i].id == selected_check_box_id ) var current_check_box = check_boxes[i];
    var current_check_box_is_checked = current_check_box.checked;       
    // get all "checked" 
    for( var i in check_boxes ) {
        if( check_boxes[i].checked ) { 
            selected_check_boxes.push( check_boxes[i] );
            count += 1;
        } 
    }
    if( current_check_box_is_checked ) {
        // checking
        if( count < 4 ) {
            current_check_box.checked = true;
            // count = 4 - disabling
            if( count == 4 ) {
                for( var i in check_boxes ) {
                    if( !check_boxes[i].checked ) check_boxes[i].disabled = true;
                }
            }
        }
        else current_check_box.checked = false;
    } else {
        // unchecking
        // count is < 4 -> enabling
        for( var i in check_boxes ) {
            check_boxes[i].disabled = false;
        }
    }
} 

功能验证\u选中（选中\u复选框\u id）{
var计数=0；
var selected_check_box=new Array（）；
var复选框=新数组（）；
var inputs=document.getElementsByTagName（“输入”）；
用于（输入中的var i）{
if（inputs[i].type==“checkbox”）复选框。push（inputs[i]）；
}
//获取当前复选框
for（复选框中的变量i）if（复选框[i].id==所选的复选框[id）var current\u check\u box=复选框[i]；
var current\u check\u box\u is\u checked=current\u check\u box.checked；
//全部“检查”
用于（复选框中的var i）{
如果（复选框[i]。选中）{
选中的复选框。按下（复选框[i]）；
计数+=1；
} 
}
如果（当前复选框已选中）{
//检查
如果（计数<4）{
当前复选框。选中=真；
//计数=4-禁用
如果（计数=4）{
用于（复选框中的var i）{
如果（！复选框[i]。选中）复选框[i]。禁用=真；
}
}
}
else current_check_box.checked=false；
}否则{
//取消勾选
//计数<4->正在启用
用于（复选框中的var i）{
复选框[i].disabled=false；
}
}
} 

欢迎任何帮助，

---

提前感谢。

简单浏览一下，您的代码似乎太复杂，无法完成任务

我可以建议使用类似的方法吗？您可以使用psudeo选择器“”非常轻松地选择相关复选框。还有，看看这个

---

如果您不想使用库，我建议首先创建一个可以计算复选框数量的函数。然后创建一个可以禁用或启用所有未选中复选框的函数。最后，将两者结合起来，并注册一个函数，在复选框的单击事件中触发。

正如

cofiem

所说，您的代码对于您想要实现的目标来说相当复杂；我建议将其分解为几个更小的函数，以重用代码并降低复杂性

首先，实现一个函数以获取页面上的所有复选框：

function getCheckboxes()
{
    var inputs = document.getElementsByTagName("input");
    var checkboxes = new Array();

    for(var i=0;i<inputs.length;++i) {
         if(inputs[i].type=="checkbox")
             checkboxes.push(inputs[i]);
    }

    return checkboxes;
}

函数getcheckbox（）
{
var inputs=document.getElementsByTagName（“输入”）；
var复选框=新数组（）；
对于（var i=0；i来说，有两件事是错误的。让我们先给出一个好的版本

我还在以下网站上发布了一个演示：

在原始版本中，有一段代码如下所示：

if (count < 4) {
   if (count == 4) {

if（计数<4）{
如果（计数=4）{

不会发生的。所以，这是正确的

正如您在另一个答案中看到的，我们将函数更改为去掉查找ID。而不是在某个单独的函数中计算ID（我假设您正在跟踪某个其他函数发生的“上次单击”），只需使用this修饰符将其传递到函数中即可

好的，最后但并非最不重要的一点，这在jQuery中是什么样子。希望这将有助于理解它是如何工作的以及为什么值得使用：

（见示例：）

选择的功能限制（e）{
//得到你所有的复选框
var复选框=$（e.currentTarget）.parent（）.children（）.filter（'input:checkbox'）；
//选中复选框数，如果为4，我们将禁用
var disableCheckBoxes=（checkBoxes.filter（':checked'）。长度==4）；
//如果小于4，则启用复选框；如果小于4，则禁用复选框
复选框。筛选器（':not（：checked'）。每个（函数（）{
this.disabled=禁用复选框；
});           
}
//文档准备就绪后，设置复选框以限制选择计数
//如果您有这些复选框所在的特定div，您应该
//将选择器（“输入：复选框”）更改为（“yourDiv输入：复选框”）
$（函数（）{
$（“输入：复选框”）。单击（已选定）；
});

关于这个版本，我要注意的另一点是，它在div中的一组复选框上工作，而您的版本会在整个页面上选中复选框。（这是有限的。
我在这个愚蠢的东西的痛苦中检查了jQuery，但我想-为什么直接跳到库中，当我只是在乞求JavaScript时…而且，我找不到更全面的教程（尽管有很多信息）跳进图书馆并不是一个坏主意，我还推荐jquery。它不仅可以让你的生活变得更轻松，还可以让你找到各种你可以轻松完成的高级事情。唷。好吧，这太过分了。但你已经做到了。非常感谢你的帮助。
function verify_selected(checkbox) {
    var checkboxes = getCheckboxes();
     var count=0;

     for(i=0;i<checkboxes.length;++i) {
         if(checkboxes[i].checked)
             count++;
     }

     if(count>=4)
         setDisabled(true);
     else
         setDisabled(false);
}

<input type="checkbox" onClick="verify_selected(this);">
//Insert 7 of these..

function verify_selected(currentCheckbox) {
        var count = 0;
        var selected_check_boxes = []; // this will be fine...
        var check_boxes []; 
        var inputs = document.getElementsByTagName("input");
        for( var i in inputs ) {
            if( inputs[i].type == "checkbox" ) check_boxes.push( inputs[i] );
        }
        // get all "checked" 
        for( var i in check_boxes ) {
                if( check_boxes[i].checked ) { 
                        count += 1;
                } 
        }

        if( currentCheckbox.checked && (count == 4)) {
             for( var i in check_boxes ) 
                   if( !check_boxes[i].checked ) 
                        check_boxes[i].disabled = true;
        } else {
            for( var i in check_boxes ) 
                 check_boxes[i].disabled = false;

        }
}

if (count < 4) {
   if (count == 4) {

function limitSelected(e) {    

    // get all of your checkboxes
    var checkBoxes = $(e.currentTarget).parent().children().filter('input:checkbox');

    // get the number of checkboxes checked, if 4, we'll disable
    var disableCheckBoxes = (checkBoxes.filter(':checked').length == 4);

    // enable checkboxes if we have < 4, disable if 4     
    checkBoxes.filter(':not(:checked)').each(function() {
           this.disabled = disableCheckBoxes;
    });           
}

// when the document is ready, setup checkboxes to limit selection count
// if you have a particular div in which these checkboxes reside, you should
// change the selector ("input:checkbox"), to ("#yourDiv input:checkbox")
$(function() {
  $('input:checkbox').click(limitSelected);
});