为复选框优化jquery小脚本

Question

我做了一个小的验证脚本,应该是这样的:我有4个复选框,一个有特定的操作方式,这个复选框的id是chx0

• 如果我选中了chx0复选框,那么它会释放所有其他选中的复选框

• 如果我检查了所有其他checbox中的一个,那么它就释放了chx0

这是我的代码:

<script type="text/javascript"> 

    $(document).ready(function() {
        $('#chx0').click(function() { // click on the chx0 checkbox

            if ($('#chx0').attr('checked')) {

                $('#chx1').attr('checked', false);
                $('#chx2').attr('checked', false);
                $('#chx3').attr('checked', false);
            }
        });

        $('#chx1').click(function() {// click on the chx1 checkbox

            if ($('#chx1').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });

        $('#chx2').click(function() { // click on the chx2 checkbox

            if ($('#chx2').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });

        $('#chx3').click(function() { // click on the chx3 checkbox

            if ($('#chx3').attr('checked')) {
                $('#chx0').attr('checked', false);
            }
        });

    });

</script> 

这段代码工作得很好,只是为了获得更好的练习!

Answer 1

我在每个复选框上放了一个课

<input type="checkbox" name="chx0" id="chx0" class="checkbox-group singleton">
<label for="chx0">Check me out!</label>
<input type="checkbox" name="chx1" id="chx1" class="checkbox-group">
<label for="chx1">Check us out!</label>
<input type="checkbox" name="chx2" id="chx2" class="checkbox-group">
<label for="chx2">Check them out!</label>

然后用你的jQuery就可以了

$('input.checkbox-group').each( function() {
    $(this).click( function() {
        if ( $(this).hasClass('singleton') ) {
            $('input.checkbox-group:checked').removeAttr('checked');
        } else {
            $('input.checkbox-group.singleton').removeAttr('checked');
        }
    };   
});

未经测试,但我认为这样的事情应该有效.我不记得使用更改事件而不是单击是否更好.