确保至less有一个checkbox被选中
我有一个表单与多个checkbox，我想使用JavaScript，以确保至less有一个选中。 这就是我现在所拥有的东西，但是无论select什么，都会popup一个警报。
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") } }
我决定放弃“谢谢”部分以配合作业的其余部分。 非常感谢，每一个build议真的帮助。
如果您打算像document.FC.c1一样引用它们，您应该避免使用两个同名的checkbox。 如果您有多个名为c1checkbox，浏览器将如何知道您所指的是哪一个？
这里有一个非jQuery解决scheme来检查页面上的任何checkbox是否被选中。
var checkboxes = document.querySelectorAll('input[type="checkbox"]'); var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
您需要Array.prototype.slice.call部分将document.querySelectorAll返回的NodeList转换为您可以调用的一个数组。
这应该工作：
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/
检查这个。
您无法通过名称访问表单input。 改用document.getElements方法。
使用jQuery，您可以防止用户取消选中上次选中的checkbox。
$('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 $('#cont').html(getArrVal.toString()); } else { $(this).prop("checked",true); $('#cont').html("At least one value must be checked!"); return false; }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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="cont"></div>
香草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); }
说明：
一旦表单提交被尝试，这将更新您的checkbox部分的标签，以通知用户检查checkbox，如果他/她还没有。 如果没有选中checkbox，则会显示一个隐藏的“错误”标签，提示用户“请选中checkbox！”。 如果用户至less检查一个checkbox，则红色标签会再次被隐藏，显示原始标签。 如果用户再次取消选中所有checkbox，则红色标签将实时返回。 这是由JavaScript的onchange事件（写成.addEventListener('change', function(){});
< 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 >
