0

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/

4

3 に答える 3

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();
    }
});
于 2013-04-03T18:30:00.547 に答える