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

Question

我正在验证一些复选框，并希望用户能够仅从4个中选择4个（如果可能），则禁用其他复选框（如果已经选中了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;
        }
    }
} 

欢迎任何帮助，在此先感谢。

Answer 1

简要浏览一下，您的代码似乎太复杂了。

我可以建议使用类似jquery的东西吗？ 您可以使用伪选择器' ：checked '轻松选择相关的复选框。 另外，请查看此复选框教程 。

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

Answer 2

有几处错误。 让我们先给出好的版本。

我还在以下网址放了一个演示： http : //jsbin.com/ajimi

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) {

不会发生。 因此，这已得到纠正。

正如您在另一个答案中所看到的，我们更改了功能以取出查找ID。 与其在某些单独的函数中找出ID（我假设您正在跟踪发生的其他函数的“最后点击”），只需使用this修饰符将其传递给该函数。

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

（请参见示例： http : //jsbin.com/ihone ）

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);
});

关于此版本，我要注意的另一件事是，它适用于div内的复选框组，而不是您的版本，该版本将在整个页面上显示复选框。 （这是限制性的。

Answer 3

正如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;
}

然后是启用/禁用复选框的功能：

function setDisabled(state) {
    var checkboxes = getCheckboxes();

    for(i=0;i<checkboxes.length;++i) {
        //Only unchecked checkboxes will need to be enabled/disabled
        if(!checkboxes[i].checked)
            checkboxes[i].disabled = state;
    }
}

现在实现您的功能，以验证是否需要启用或禁用复选框：

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..

如您所见，该代码更易于阅读和维护，并且更简单。