Question

如果我选中“No Entry”复选框，则说我有三个复选框。如果选中复选框，则应取消选中其他复选框。如果在选中“No Entry”时检查其他复选框，则应取消选中“No Entry”。我试图使用Javascript和jQuery实现这一点。

<input type="checkbox" class="otherCheckboxes" id="checkbox1" value="1" /> 1
<input type="checkbox" class="otherCheckboxes"  id="checkbox2" value="2" /> 2
<input type="checkbox" id="checkbox3" value="No Entry" /> No Entry

我已经尝试了这个但是根据上述要求它没有运作。

$('#checkbox3').click(function() {
if ($(this).is(':checked')) {
    $('.otherCheckboxes').attr('checked', false);
}

Answer 1

$('#checkbox3').change(function() {
if (this.checked) {
    $('.otherCheckboxes').each(function(){
        this.checked = false;
    }
}

Answer 2

我会这样做：

var otherCheckboxes = $('.otherCheckboxes');
var noEntry = $('#checkbox3');
otherCheckboxes.on('change', function(e) {
    if( $(this).is(':checked') ) {
    	noEntry.prop('checked', false);
    };
}).trigger('change');
noEntry.on('change', function(e) {
    if( noEntry.is(':checked') ) {
    	otherCheckboxes.prop('checked', false);
    };
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <label for="checkbox1"><input type="checkbox" class="otherCheckboxes" id="checkbox1" value="1" /> 1</label>
</p>
<p>
    <label for="checkbox2"><input type="checkbox" class="otherCheckboxes"  id="checkbox2" value="2" /> 2</label>
</p>
<p>
    <label for="checkbox3"><input type="checkbox" id="checkbox3" value="No Entry" /> No Entry</label>
</p>

同样在JSFiddle。

Answer 3

试试这个：）

$('input:checkbox').on('click change',function() {
    if ($(this).prop('checked')) { //if ($(this).is(':checked')) { will do too
        if ($(this).hasClass('otherCheckboxes')) {
            $('#checkbox3').prop('checked',false);
        } else {
            $(this).siblings().prop('checked',false);
        }
    }
});

或者：

$('input:checkbox').on('click change',function() {
    if ($(this).is(':checked')) {
        var uncheck = $(this).hasClass('otherCheckboxes')?$('#checkbox3'):$(this).siblings();
        uncheck.prop('checked',false);
    }
});

在点击特定复选框

3 个答案: