Question

HTML

<div>Group 1
    <br>
    <label>
        <input type="checkbox" name="testing" value="B" checked="checked">A</label>
    <br />
    <label>
        <input type="checkbox" name="testing" value="I">B</label>
    <br />
    <label>
        <input type="checkbox" name="testing" value="A">C</label>
    <br />
</div>
<div>Group 2
    <br>
    <label>
        <input type="checkbox" name="testing2" value="B">A</label>
    <br />
    <label>
        <input type="checkbox" name="testing2" value="I">B</label>
    <br />
    <label>
        <input type="checkbox" name="testing2" value="A">C</label>
    <br />
</div>

JS

$("input:checkbox").change(function () {
    var checkname = $(this).attr("name");

    if (this.checked) {

        $("input:checkbox[name='" + checkname + "']").removeAttr("checked").parent().hide();
        this.checked = true;
        $(this).parent().show();
    } else {
        $("input:checkbox[name='" + checkname + "']").parent().show();
    }
});

选中复选框时，隐藏/显示脚本的效果很好，但是如果一个复选框最初检查窗口加载，那么如何让它运行上面的脚本以便隐藏未检查的其他脚本？

http://jsfiddle.net/warface/uvYzW/

Answer 1

您可以使用以下代码在已经选中的复选框上触发更改事件，并导致代码触发。

$("input:checkbox[checked]").trigger("change");

更新了小提琴：http://jsfiddle.net/uvYzW/2/

Answer 2

将此代码添加到最后：

$(function(){
    $('input:checked').parent().siblings('label').hide();
    $('input:checked').parent().show();
});

如何根据此脚本隐藏未选中的复选框？

2 个答案: