如果復選框被選中多個，如何添加JavaScript警報消息？

Question

我的代碼是這樣的：

 <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Atletico </label> </div> </li> </ul> </div> 

jsfiddle： https ://jsfiddle.net/oscar11/m7by6zcw/

在每個復選框組中，用戶最多只能選擇1。如果用戶選擇多個，則我要顯示警報消息。
例如，在英格蘭復選框組中，如果用戶選擇切爾西，然后再次選擇阿森納，則必須顯示警報消息。

我該怎么做？

我嘗試過這個。 但是我還是很困惑

Answer 1

嘗試這個

 $('input[type="checkbox"]').change(function(){ var group = $("ul.list-unstyled"); for(var i=0;i<group.length;i++){ if($("input:checked",group[i] ).length>1){ alert("Not allowed to select more than one"); this.checked = false; return; } } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Atletico </label> </div> </li> </ul> </div> 

Answer 2

我認為更好的選擇是將單選按鈕設置為復選框樣式：

我用谷歌搜索了一個很好的例子： http : //cssdeck.com/labs/ldmtsmfk

因此，您無需為更改單選按鈕的默認行為的JS邏輯而煩惱。

Answer 3

沒有jQuery。

 var checkboxes = document.querySelectorAll('[type="checkbox"]'); for (var ix = 0, length = checkboxes.length; ix < length; ix++) { checkboxes[ix].addEventListener('change', function() { if (document.querySelectorAll(':checked').length > 1) { alert('no'); this.checked = false; } }); } 

 <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="checkbox"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="checkbox"> Atletico </label> </div> </li> </ul> </div>