jquery - 检查一个输入时如何隐藏其他输入？

Question

HTML

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

JS

$("input:checkbox").change(function() {
    if (this.checked) {
        var checkname = $(this).attr("name");
        $("input:checkbox[name='" + checkname + "']").removeAttr("checked");
        this.checked = true;
    }
});

该脚本使复选框的作用类似于收音机，因此只能检查 1 的同名属性。现在我希望它隐藏那些未选中具有相同名称属性的人。如果我取消选中已选中的复选框，所有其他复选框都会返回。

你说的小提琴？：http: //jsfiddle.net/warface/gcX7Y/

Answer 1

试试这个：http: //jsfiddle.net/P2d4R/3/

我还编辑了您的 HTML 以将复选框包装在label标签中，这使得隐藏起来更简单。

<div>Group 1
    <br>
    <label>
        <input type="checkbox" name="testing" value="B">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>


$("input:checkbox").change(function () {
    var checkname = $(this).attr("name");
    if (this.checked) {
        $("input:checkbox[name='" + checkname + "']").not(this)
            .removeAttr("checked")
            .parent()
            .hide();
    } else {
        $("input:checkbox[name='" + checkname + "']").parent().show();
    }
});

Answer 2

您可以将功能更改为：

$("input:checkbox").change(function() {
    if (this.checked) {
        var checkname = $(this).attr("name");
        $("input:checkbox[name='" + checkname + "']").removeAttr("checked");
        this.checked = true;
        $(this).siblings(':checkbox').hide();
    } else {
        $(this).siblings(':checkbox').show();   
    }
});

演示

这将留下br元素，但是这也会留下字母，如果您也想隐藏它们，最好将它们包装在spanorlabel元素或类似的东西中，并且该功能需要稍作更改，如果你对显示的字母没问题，这应该没问题...

Answer 3

$("input:checkbox").change(function() {
    var checkname = $(this).attr("name");
    if (this.checked) {
        $("input:checkbox[name='" + checkname + "']").not(this).hide().removeAttr("checked");
    } else {
        $("input:checkbox[name='" + checkname + "']").show();
    }
});