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的代码，以供参考，以防小提琴丢失。

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

jQuery取消选中所有复选框

1 个答案: