选中所有未将名称推送到数组中的复选框

Question

我有一个带有复选框的表单。 javascript 函数 allPosPlayersCheckboxes 使用“检查所有”复选框来控制其他复选框。其他函数（getPosAllFilterOptions 和 getPosPlayersFilterOptions）将“名称”属性推送到数组中。这一切都会在表单上发生任何更改时触发。

假设所有复选框都未选中。如果用户选中“nonP_all”复选框，它会自动选中其他带有 class="nonP" 的复选框。不幸的是，当“名称”属性被推入数组时，它不会包含任何具有 class="nonP" 的属性。

我不确定为什么它们不包含在数组中。函数（getPosAllFilterOptions 和 getPosPlayersFilterOptions）是否不等待 allPosPlayersCheckboxes 完成？有没有办法将辅助复选框包含在数组中？感谢您的帮助！

<form id="formFilter">
  <h2>Filter options</h2>
 <div>
    <input type="checkbox" id="nonP_all" class="Pos_all" name="nonP" checked="checked">
    <label for="nonP">Position Players</label>
    <input type="checkbox" id="C" class="nonP" checked="checked" name="C">
    <label for="C">C</label>
    <input type="checkbox" id="1B" class="nonP" checked="checked" name="1B">
    <label for="1B">1B</label>
    <input type="checkbox" id="2B" class="nonP" checked="checked" name="2B">
    <label for="2B">2B</label>
    <input type="checkbox" id="3B" class="nonP" checked="checked" name="3B">
    <label for="3B">3B</label>
    <input type="checkbox" id="SS" class="nonP" checked="checked" name="SS">
    <label for="SS">SS</label>
    <input type="checkbox" id="LF" class="nonP" checked="checked" name="LF">
    <label for="LF">LF</label>
    <input type="checkbox" id="CF" class="nonP" checked="checked" name="CF">
    <label for="CF">CF</label>
    <input type="checkbox" id="RF" class="nonP" checked="checked" name="RF">
    <label for="RF">RF</label>
    <input type="checkbox" id="DH" class="nonP" checked="checked" name="DH">
    <label for="DH">DH</label>
  </div>

function allPosPlayersCheckboxes(){
    $("#nonP_all").click(function(){ // When it is clicked....
        $('.nonP').prop('checked', this.checked); // Sets all to reflect "All"
    });
    $(".nonP").click(function(){ // When any are clicked....
        if($(".nonP").length == $(".nonP:checked").length){ // If all are checked...
            $("#nonP_all").prop("checked", true); // Sets "All" to "checked"
        }else{
            $("#nonP_all").prop("checked", false); // Sets "All" to "unchecked"
        }
    });
};

function getPosAllFilterOptions(){
    var pos_all_opts = new Array();
    $(".Pos_all:checked").each(function(){
        pos_all_opts.push($(this).attr('name')); // places names into array
    });
    return pos_all_opts;
}

function getPosPlayersFilterOptions(){
    var nonP_opts = new Array();
    $(".nonP:checked").each(function(){
        nonP_opts.push($(this).attr('name')); // places names into array
    });
    return nonP_opts;
}

var $formFilter = $("#formFilter");
$formFilter.change(function(){
    allPosPlayersCheckboxes();
    var pos_all_opts = getPosAllFilterOptions();
    var nonP_opts = getPosPlayersFilterOptions();
    console.log("pos_all_opts = " + pos_all_opts);
    console.log("nonP_opts = " + nonP_opts);
    updateQuery(pos_all_opts, nonP_opts);
});

updateQuery();

Answer 1

您遇到问题的原因是在表单更改事件处理程序中捕获了对框事件的检查，并且尚未执行检查和取消选中所有其他框的代码。因此，当您调用函数时，选中框的计数为 0。当您取消选中某个位置复选框时也会发生这种情况，最终 pos_all_opts 变量不同步并且也不正确。

这些点击处理程序不需要在函数中。它们是与复选框行为挂钩的处理程序。

$("#nonP_all").click(function(){ // When it is clicked....
    $('.nonP').prop('checked', this.checked); // Sets all to reflect "All"
});

$(".nonP").click(function(){ // When any are clicked....
    if($(".nonP").length == $(".nonP:checked").length){ // If all are checked...
        $("#nonP_all").prop("checked", true); // Sets "All" to "checked"
    }else{
        $("#nonP_all").prop("checked", false); // Sets "All" to "unchecked"
    }
});

这可能不太理想，但它确实有效。用于构建数组的函数中的代码已移至表单的更改处理程序中。

$("#formFilter").change(function(event){
    var pos_all_opts = [];
    var nonP_opts = [];

    if(event.target === $("#nonP_all")[0] && event.target.checked) {
        pos_all_opts = 'nonP';
        $(".nonP").each(function(){
            nonP_opts.push($(this).attr('name')); // places names into array
        });
    } else if(event.target === $("#nonP_all")[0] && !event.target.checked) {
        pos_all_opts = [];
        nonP_opts = [];
    } else if(event.target !== $("#nonP_all")[0] && $(".nonP:checked").length  === 9) {
        pos_all_opts = 'nonP';
        $(".nonP").each(function(){
            nonP_opts.push($(this).attr('name')); // places names into array
        });
    } else {
        pos_all_opts = [];
        $(".nonP:checked").each(function(){
            nonP_opts.push($(this).attr('name')); // places names into array
        });
    }

    console.log("pos_all_opts = " + pos_all_opts);
    console.log("nonP_opts = " + nonP_opts);
    updateQuery(pos_all_opts, nonP_opts);
});

updateQuery();

Fiddle供参考