javascript - jQuery 取消选中所有复选框

Question

我有以下 jQuery 脚本，可以正确显示并检查两个隐藏的复选框。唯一的问题是我试图隐藏这两个复选框，但是当我取消选中可见复选框时，它们仍然处于选中状态？

<input type="checkbox" name="JobType[]" class="visiChk" id="nineteen" value="19" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("19", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
<label id="hiddenLabel" style="display:none">
<input type="checkbox" name="JobType[]" class="visiChk" id="seventeen" value="17" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("17", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
<input type="checkbox" name="JobType[]" class="visiChk" id="eighteen" value="18" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("18", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
</label>
    <script>
    // update if any are checked/unchecked
$('.visiChk').change(function() {
    var hiddenLabel = $('#hiddenLabel')[0];
    var seventeen = $('#seventeen')[0];
    var eighteen = $('#eighteen')[0];

    // Are any of them checked ?
    if ($('.visiChk:checked').length > 0) {
        hiddenLabel.style.display = 'block';
        seventeen.checked = true;
        eighteen.checked = true;
    } else  {
        hiddenLabel.style.display = 'none';
        seventeen.checked = false;
        eighteen.checked = false;
    }
});</script>

Answer 1

这里发生了一个逻辑错误，对于隐藏字段来说可能不太明显。当您检查是否标记了任何复选框时，您实际上是在检查所有复选框，甚至是隐藏的复选框。

所以，再次完成这个循环。页面加载，未选中任何复选框。用户检查可见的。三者均已检查。然后，用户仅取消选中可见的一项。在这里检查你的逻辑

if ($('.visiChk:checked').length > 0) {

正在看着他们三个。有检查的吗？是的，那两个隐藏的仍然存在!因此，所有三个都将被设置为再次检查。您需要一种方法来仅查看可见的复选框，然后相应地更新不可见的复选框。唯一的 ID 或不同的类会很好地工作。

我写了一个 jsfiddle 示例来帮助说明发生了什么。我没有隐藏复选框，而是将字体颜色设置为灰色，以显示哪些复选框实际上应该隐藏。

https://jsfiddle.net/sm1215/d9geaog4/1/

编辑:另外，我设置了一个控制台日志来显示正在进行的逻辑检查的结果。当页面首次加载(没有选中任何复选框)并且用户选中一个复选框时，其计算结果为 1。取消选中可见复选框，其计算结果为 2 - 显示 2 个隐藏复选框仍在计算中。

编辑2:这是来自jsfiddle的代码，供引用，以防 fiddle 丢失。

HTML

<input type="checkbox" name="JobType[]" id="nineteen" class="visiChk" value="19"  /> Plumbing
<label id="hiddenLabel" style="color:silver; /*display:none*/">
    <input type="checkbox" name="JobType[]" class="visiChk" id="seventeen" value="17" /> Plumbing
    <input type="checkbox" name="JobType[]" class="visiChk" id="eighteen" value="18" /> Plumbing
</label>

JS

// update if any are checked/unchecked
$('.visiChk').change(function() {
    var hiddenLabel = $('#hiddenLabel')[0];
    var seventeen = $('#seventeen')[0];
    var eighteen = $('#eighteen')[0];

    // Are any of them checked ?
    console.log($('#nineteen:checked').length);

    if ($('#nineteen:checked').length > 0) {
        hiddenLabel.style.display = 'block';
        seventeen.checked = true;
        eighteen.checked = true;
    } else {
        // Commenting this out so the hidden fields stay visible for demo purposes
        //hiddenLabel.style.display = 'none'; 
        seventeen.checked = false;
        eighteen.checked = false;
    }
});