![](/img/trans.png)
[英]How can I add more than one handleClick with checkbox using javascript and html
[英]How can I add a javascript alert message if checkbox is checked more than one?
我的代碼是這樣的:
<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>
在每個復選框組中,用戶最多只能選擇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>
我認為更好的選擇是將單選按鈕設置為復選框樣式:
我用谷歌搜索了一個很好的例子: http : //cssdeck.com/labs/ldmtsmfk
因此,您無需為更改單選按鈕的默認行為的JS邏輯而煩惱。
沒有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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.