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

Question

我正在验证一些复选框，并希望用户能够仅选择 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;
        }
    }
} 

欢迎任何帮助，提前致谢。

Answer 1

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

我还在以下位置发布了演示: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 内的一组复选框，而不是您的版本，它会选取整个页面上的复选框。 (这是有限的。