我有以下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;
}
});