[英]JavaScript Validation For Checkbox, When Multiple checkbox selected from option list
我想对Checkbox进行JavaScript验证
如果未选中“来自复选框的值”,则应收到警报“请选择您知道的语言”
但是,如果用户从复选框列表中选择2种语言。 我需要使用JavaScript来提醒2种语言。
我知道与单个复选框,但不知道如何使用数组。
这是我的代码...
<script type="text/javascript"> function myFunction(form){ var i, chks = document.getElementsByName('lang[]'); for (i = 0; i < chks.length; i++){ if (chks[i].checked){ //Here how i should alert selected values return true; }else{ alert('No item selected'); return false; } } } </script>
<form name="registration" id="registration_form_id" action="" method="post" onsubmit="return myFunction(this)"> <div id="languageId"><label>Language : </label> <input type="checkbox" name="lang[]" value="english" >English</input> <input type="checkbox" name="lang[]" value="marathi">Marathi</input> <input type="checkbox" name="lang[]" value="hindi">Hindi</input> </div> <div id="submit1"><button type="submit">Submit</button></div><br/> </form>
谢谢拉胡尔
如果要获取所选复选框值的列表,则可以使用它。
$('#someButton').click(function() {
var values= [];
$('#MyDiv input:checked').each(function() {
values.push(this.val);
});
// now values contains all of the values of checked checkboxes
// do something with it
});
如果仅需要一个选定的值,则使用radio
输入类型会更容易。 使用它,您可以使用querySelector
查找选定的值(请参见MDN )。 对于多种语言,还可以使用querySelectorAll
,将其结果转换为Array
并使用Array.map
(请参见MDN )将结果映射到已选中复选框的值的Array
中。
这是针对两种情况重写的代码段(无表格):
(function (d, w, undefined) { d.querySelector('#languageId button').addEventListener('click', doSubmit); d.querySelector('#multiLanguageId button').addEventListener('click', doSubmitMulti); var languageSelectorContainer = d.querySelector('#languageId'); var multiLanguageSelectorContainer = d.querySelector('#multiLanguageId'); function doSubmit() { var languageChecked = languageSelectorContainer .querySelector('[type=radio]:checked'); d.querySelector('#result').innerHTML = 'your selected language: <b>'+ (languageChecked ? languageChecked.value : 'not yet selected') + '</b>'; } function doSubmitMulti() { var languagesChecked = [].slice.call( multiLanguageSelectorContainer .querySelectorAll('[type=checkbox]:checked') ) .map(function (v){ return v.value; }); d.querySelector('#result').innerHTML = 'you selected these language(s): <b>'+ (languagesChecked.length ? languagesChecked.join(', ') : 'none yet selected') + '</b>'; } }(document, window))
<div id="languageId">Pick your language: <input type="radio" name="lang[]" value="english">English <input type="radio" name="lang[]" value="marathi">Marathi <input type="radio" name="lang[]" value="hindi">Hindi <button>Submit</button> </div> <div id="multiLanguageId">Pick the languages you know: <input type="checkbox" name="mlang[]" value="english">English <input type="checkbox" name="mlang[]" value="marathi">Marathi <input type="checkbox" name="mlang[]" value="hindi">Hindi <button>Submit</button> </div> <div id="result"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.