为复选框优化jQuery小脚本

Question

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

• 如果我选中了chx0复选框，那么它会释放所有其他复选框。
• 如果我选中了其他所有复选框中的一个，那么它就释放了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');
        }
    };   
});

还没经过测试，但我认为这样的方法应该能起作用。我不记得使用更改事件是否比单击更好。

Answer 2

可以将所有单个复选框的子句组合起来，如下所示

$('#chx1','#chx2','#chx3').click(function() {
    if ($(this).attr('checked')) {
        $('#chx0').attr('checked', false);
    }
});

而不是每个复选框一个。在"chx0“中，也可以使用$(this)代替$('#chx0')。

Answer 3

我想出了一个类似于ianbarker的东西。与其假设依赖关系是全部或全部，不如使用自定义数据标记来列出依赖项。

一个有用的例子是在这里玩小提琴

$('.luckyChecks').click(function() { // click on ANY lucky checkbox
    var $t = $(this);
    if($t.attr('checked')){
        var clear = $t.attr("data-clear").split(",");
        for(var i=0; i < clear.length; i++){
            $('#'+clear[i]).attr('checked',false);
        }
    }
});

HTML：

<input type="checkbox" id="chx0" class="luckyChecks" data-clear="chx1,chx2,chx3" /> 
Diamonds <br />
<input type="checkbox" id="chx1" class="luckyChecks" data-clear="chx0"/> 
Clovers <br />
...