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

Demo

这将留下br个元素，但是如果你想隐藏这些元素，这也会留下字母，将它们包装在span或{label中是个好主意。 {1}}元素或类似的东西，函数需要稍微更改一下，如果你对字母显示没问题，这应该没问题......

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

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

3 个答案: