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

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

Answer 2

您可以将所有单独复选框的子句组合在一起，例如

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

而不是每个复选框一个。同样在“chx0”中，您可以使用$（this）而不是$（'＃chx0'）

Answer 3

我想出了类似于ianbarker的东西。我没有使用自定义数据标记来列出依赖项，而是假定依赖项是全部或全部。

一个工作示例是on jsfiddle here

$('.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 />
...

为复选框优化jquery小脚本

3 个答案: