取消勾选所有复选框，然后单击某个复选框

问题描述：

说我有三个复选框，如果我选中“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); 
}

如果你想其他复选框被禁用，那么就做检查属性设置为false是不够的。尝试将禁用设置为true。然后，如果其他复选框被禁用，则用户必须首先取消选中no项才能选择其他复选框。这将增加一个额外的点击，这可能不是一个好主意。 –

@Badhon你可以请你提供一个jQuery的例子。我是与前端框架合作的新手。因此这对我来说很困难。 – Suresh

答

我会做这种方式：

var otherCheckboxes = $('.otherCheckboxes'); 
 
var noEntry = $('#checkbox3'); 
 
otherCheckboxes.on('change', function(e) { 
 
    if($(this).is(':checked')) { 
 
    \t noEntry.prop('checked', false); 
 
    }; 
 
}).trigger('change'); 
 
noEntry.on('change', function(e) { 
 
    if(noEntry.is(':checked')) { 
 
    \t 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。

这就是我正在寻找的内容，非常感谢@skobalijic – Suresh

愉快是我的所有欢呼， – skobaljic

答

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

非常感谢您的回答。但是，当我试图实现这一点时，它不工作。 .click功能不起作用:( – Suresh

我编辑了我的答案，尝试更改事件 – Psi

答

试试这个:)

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

非常感谢您的回复 – Suresh

不客气，@Suresh –

取消勾选所有复选框，然后单击某个复选框

相关推荐