如何驗證多個復選框以在 jquery/javascript 中檢查至少一個？
[英]How to validate multiple checkbox to check atleast one in jquery/javascript?
問題描述
我在這個論壇上看到了很多關於多復選框驗證的例子，但我的情況不同。 我有兩組同名的復選框，我想在每組中至少檢查一個。
這是代碼
<div class=main> question one here *******? <input type="checkbox" name="option[]" />checkbox 1 <input type="checkbox" name="option[]" />checkbox 2 <input type="checkbox" name="option[]" />checkbox 3 <input type="checkbox" name="option[]" />checkbox 4 </div> <div class=main> question two here *******? <input type="checkbox" name="option[]" />checkbox 1 <input type="checkbox" name="option[]" />checkbox 2 <input type="checkbox" name="option[]" />checkbox 3 <input type="checkbox" name="option[]" />checkbox 4 </div>
我已經嘗試了很多但沒有運氣..任何幫助都會很棒。
5 個解決方案
解決方案1
1 2016-10-17 11:03:23
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
});
function JXX_Check()
{
$('.main').each(function(){
if ($(this).find('input[type="checkbox"]:checked').length <=0)
{
alert('atleast select one checkbox in div with index '+ $(this).index() );
}
});
}
</script>
</head>
<body>
<input type='button' value='check' onClick='JXX_Check();'/>
<div class=main>
<br>
question one here *******?
<input type="checkbox" name="option" value="Bike1"/>checkbox 1<br>
<input type="checkbox" name="option" value="Bike2"/>checkbox 2<br>
<input type="checkbox" name="option" value="Bike3"/>checkbox 3<br>
</div>
<div class=main>
<br>
question two here *******?
<input type="checkbox" name="option" value="Bike1"/>checkbox 1<br>
<input type="checkbox" name="option" value="Bike2"/>checkbox 2<br>
<input type="checkbox" name="option" value="Bike3"/>checkbox 3<br>
</div>
</body>
</html>
解決方案2
0 2016-10-17 10:49:55
使用:checked with length 來檢查復選框的數量。
在你的情況下，檢查$(this).find('input[type="checkbox"]:checked').length特別設置。
$('.main').each(function(){
console.log($(this).find('input[type="checkbox"]:checked').length);
});
$('#checkValid').click(function(){ $('.main').each(function(){ if($(this).find('input[type="checkbox"]:checked').length == 0) { alert("please select at-least one checkbox"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> question one here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <div class="main"> question two here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <button id="checkValid">Check valid</button>
解決方案3
0 已采納 2016-10-17 10:50:26
您可以使用every()來檢查每個.main是否至少有一個選中的復選框
var valid = $('.main').toArray().every(function(item) {
return $(item).find('input[type="checkbox"]:checked').length >= 1;
});
$('#test').on('click', function() { var valid = $('.main').toArray().every(function(item) { return $(item).find('input[type="checkbox"]:checked').length >= 1; }); alert(valid) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=main> question one here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <div class=main> question two here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <br/><br/> <input type="button" value="Validate" id="test">
解決方案4
0 2016-10-17 11:02:20
您應該遍歷所有 .main 元素，然后檢查它們對應的復選框。
$('#check').click(function() { $('.main').each(function() { if ($(this).find(':checkbox:checked').length == 0) alert($(this).text() + ': no option was checked'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=main> question one here *******? <input type="checkbox" name="option[]" />checkbox 1 <input type="checkbox" name="option[]" />checkbox 2 <input type="checkbox" name="option[]" />checkbox 3 <input type="checkbox" name="option[]" />checkbox 4 </div> <div class=main> question two here *******? <input type="checkbox" name="option[]" />checkbox 1 <input type="checkbox" name="option[]" />checkbox 2 <input type="checkbox" name="option[]" />checkbox 3 <input type="checkbox" name="option[]" />checkbox 4 </div> <button id="check">Check</button>
解決方案5
0 2016-10-17 11:12:38
您可以附加一個click事件來驗證按鈕。 比檢查所有.main是否至少檢查了一個復選框輸入：
$('#validate').on('click', function() { $('.main').each(function() { if (!$(this).find('input:checkbox:checked').length) { alert('You have to check at least one answer by question.'); return false; } // Your code... }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=main> question one here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <div class=main> question two here *******? <input type="checkbox" name="option[]">checkbox 1 <input type="checkbox" name="option[]"> checkbox 2 <input type="checkbox" name="option[]">checkbox 3 <input type="checkbox" name="option[]"> checkbox 4 </div> <button id="validate">Validate</button>
如何驗證具有多個復選框的表單以至少選中一個
[英]How to validate a form with multiple checkboxes to have atleast one checked
如何找到或使用javascript檢查至少一個復選框
[英]how to find that atleast one checkbox is checked or not using javascript
jQuery驗證表單（檢查至少10個字符和特定值）
[英]jQuery to validate a form (check for atleast 10 characters and certain value)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.