[英]Making sure at least one checkbox is checked
我有一個帶有多個復選框的表單,我想使用 JavaScript 來確保至少選中一個。 這就是我現在所擁有的,但無論選擇什么,都會彈出警報。
JS(錯誤)
function valthis(){
if (document.FC.c1.checked) {
alert ("thank you for checking a checkbox")
} else {
alert ("please check a checkbox")
}
}
HTML
<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br>
<input type = "checkbox" name = "c1" value = "c4"/> C4
<br>
</form>
<br>
<br>
<input type = "button" value = "Edit and Report" onClick = "valthisform();">
所以我最終在 JS 中做的是這樣的:
function valthisform(){
var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked
if (chkd == true){
} else {
alert ("please check a checkbox")
}
}
我決定放棄“謝謝”部分以適應作業的其余部分。 非常感謝,每個人的建議真的很有幫助。
如果您打算像document.FC.c1
一樣引用它們,則應避免使用兩個具有相同名稱的復選框。 如果您有多個名為c1
復選框,瀏覽器如何知道您指的是哪個?
這是一個非 jQuery 解決方案,用於檢查頁面上是否有任何復選框被選中。
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
您需要Array.prototype.slice.call
部分的轉換NodeList
由歸國document.querySelectorAll
到一個數組,你可以調用some
上。
這應該有效:
function valthisform()
{
var checkboxs=document.getElementsByName("c1");
var okay=false;
for(var i=0,l=checkboxs.length;i<l;i++)
{
if(checkboxs[i].checked)
{
okay=true;
break;
}
}
if(okay)alert("Thank you for checking a checkbox");
else alert("Please check a checkbox");
}
如果您對代碼有疑問,請發表評論。
我使用l=checkboxs.length
來提高性能。 請參閱http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/
我會選擇更實用的方法。 自 ES6 以來,我們已經獲得了如此出色的工具來解決我們的問題,那么為什么不使用它們呢? 讓我們從給復選框一個類開始,這樣我們就可以很好地將它們圍起來。 我更喜歡使用類而不是 input[type="checkbox"] 因為現在該解決方案更通用,並且也可以在文檔中有更多復選框組時使用。
HTML
<input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
<input type="checkbox" class="checkbox" value=ck2 /> ck2<br />
JavaScript
function atLeastOneCheckboxIsChecked(){
const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}
調用時,如果沒有選中復選框,則該函數將返回 false;如果選中一個或兩個復選框,則返回 true。
它的工作原理如下,reducer 函數有兩個參數,累加器 (acc) 和當前值 (curr)。 對於數組上的每次迭代,如果累加器或當前值為真,則reducer 將返回真。 前一次迭代的返回值是當前迭代的累加器,因此,如果它為真,它將一直保持為真直到結束。
您無法通過名稱訪問表單輸入。 請改用document.getElements
方法。
香草JS:
var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable
function activitiesReset() {
var checkboxesChecked = function () { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
return true;
}
}
return false;
}
error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead.
if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked
error[2].style.display = 'block'; // red error label is now visible.
}
}
for (var i=0; i<checkboxes.length; i++) { // whenever a checkbox is checked or unchecked, activitiesReset runs.
checkboxes[i].addEventListener('change', activitiesReset);
}
解釋:
一旦嘗試提交表單,這將更新您的復選框部分的標簽,以通知用戶如果他/她尚未選中復選框。 如果未選中復選框,則會顯示隱藏的“錯誤”標簽,提示用戶“請選中復選框!”。 如果用戶選中至少一個復選框,紅色標簽會立即再次隱藏,顯示原始標簽。 如果用戶再次取消選中所有復選框,紅色標簽會實時返回。 這是通過 JavaScript 的onchange
事件實現的(寫成.addEventListener('change', function(){});
防止用戶取消選擇上次選中的復選框。
jQuery(原始答案)。
$('input[type="checkbox"][name="chkBx"]').on('change',function(){
var getArrVal = $('input[type="checkbox"][name="chkBx"]:checked').map(function(){
return this.value;
}).toArray();
if(getArrVal.length){
//execute the code
$('#msg').html(getArrVal.toString());
} else {
$(this).prop("checked",true);
$('#msg').html("At least one value must be checked!");
return false;
}
});
更新答案 2019-05-31
純JS
let i, el = document.querySelectorAll('input[type="checkbox"][name="chkBx"]'), msg = document.getElementById('msg'), onChange = function(ev){ ev.preventDefault(); let _this = this, arrVal = Array.prototype.slice.call( document.querySelectorAll('input[type="checkbox"][name="chkBx"]:checked')) .map(function(cur){return cur.value}); if(arrVal.length){ msg.innerHTML = JSON.stringify(arrVal); } else { _this.checked=true; msg.innerHTML = "At least one value must be checked!"; } }; for(i=el.length;i--;){el[i].addEventListener('change',onChange,false);}
<label><input type="checkbox" name="chkBx" value="value1" checked> Value1</label> <label><input type="checkbox" name="chkBx" value="value2"> Value2</label> <label><input type="checkbox" name="chkBx" value="value3"> Value3</label> <div id="msg"></div>
< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" > < / script >
< script type = "text/javascript" >
function checkSelectedAtleastOne(clsName) {
if (selectedValue == "select")
return false;
var i = 0;
$("." + clsName).each(function () {
if ($(this).is(':checked')) {
i = 1;
}
});
if (i == 0) {
alert("Please select atleast one users");
return false;
} else if (i == 1) {
return true;
}
return true;
}
$(document).ready(function () {
$('#chkSearchAll').click(function () {
var checked = $(this).is(':checked');
$('.clsChkSearch').each(function () {
var checkBox = $(this);
if (checked) {
checkBox.prop('checked', true);
} else {
checkBox.prop('checked', false);
}
});
});
//for select and deselect 'select all' check box when clicking individual check boxes
$(".clsChkSearch").click(function () {
var i = 0;
$(".clsChkSearch").each(function () {
if ($(this).is(':checked')) {}
else {
i = 1; //unchecked
}
});
if (i == 0) {
$("#chkSearchAll").attr("checked", true)
} else if (i == 1) {
$("#chkSearchAll").attr("checked", false)
}
});
});
< / script >
您可以使用這個簡單的代碼檢查是否至少選中了一個復選框。 您也可以刪除您的消息。
參考鏈接
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />
<script>
function checkFormData() {
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
alert("Success");
return true;
}
</script>
if(($("#checkboxid1").is(":checked")) || ($("#checkboxid2").is(":checked"))
|| ($("#checkboxid3").is(":checked"))) {
//Your Code here
}
您可以使用此代碼來驗證復選框是否至少被選中。
謝謝!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.