Оптимизировать JQuery небольшой скрипт для флажков

Question

Я сделал небольшой скрипт проверки, который должен работать следующим образом: У меня есть 4 флажка, один из них имеет определенный способ действия, идентификатор этого флажка: 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. Вместо того, чтобы полагать, что зависимости - это все или ничего, я использовал пользовательский тег данных для перечисления зависимостей.

Рабочий пример: на jsfiddle здесь

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