Javascript jQuery取消选中所有复选框

下面的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>

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

所以，再一次走过这个循环。页面加载时，未选中任何复选框。用户检查可见的一个。所有三个都已检查。然后用户只取消选中可见的一个。你的逻辑在这里检查

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

他正在看他们三个。有支票吗？是的，两个隐藏的仍然是！因此，所有三个都将再次设置为选中。您需要一种只查看可见复选框的方法，然后相应地更新不可见复选框。一个唯一的ID或不同的类可以很好地工作

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


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

编辑2：这里是来自JSFIDLE的代码，以备万一小提琴丢失时参考

HTML

你的标题说你想取消选中它们，你的问题说你想隐藏它们。它是哪一个？您正在
if
和
else
中设置
hiddenlab.style.display='block'
。第二个不是应该是
none
？为什么不使用jQuery
hide（）
和
show（）
？输入错误，已经修复了。问题仍然存在。昨晚我为什么吃玉米卷？B/C我也选择了…这与我选择此方法的原因相同。您上次对问题的编辑修复了您在问题中描述的问题。请不要这样做，这会使我的答案毫无意义。你的答案并没有解决问题……这是一个对实际问题没有影响的打字错误。因此，现在通过使我的id=“十九”可见，我如何获得正确的结果？@RoccoTheTaco
if（$“#十九”）。is（“：checked”）
if（$（“#十九：checked”）。长度>0）或者你也可以用Barmar的方法。两者都应该起作用我不知道我明白吗？你能更新JSFIDLE来显示我如何确保在取消选中原始复选框时取消选中这两个灰色复选框吗？非常感谢，这是很棒的@sm1215
<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>

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