我有以下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或其他类将很好地工作。

我写了一个jsfiddle示例,它有助于说明正在发生的事情。我没有隐藏复选框,而是将字体颜色设置为灰色,以显示实际上应该隐藏的字体。

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

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

编辑2:这是jsfiddle中的代码,以防万一小提琴丢失了。

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

10-05 20:45
查看更多