JavaScript验证复选框,当从选项列表中选择多个复选框时
JavaScript Validation For Checkbox, When Multiple checkbox selected from option list
我想对复选框进行JavaScript验证
如果未选中复选框中的值,则应收到警报"请选择您知道的语言"
但若用户从复选框列表中选择了"2种语言"。我需要两种语言应该使用JavaScript获得警报。
我知道如何使用单个复选框,但不知道如何使用数组。
这是我的密码。。。
<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>
谢谢,Rahul
如果您想获得所选复选框值的列表。。你可以用这个。。
$('#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>
相关文章:
- 通过复选框选择形成填充
- jQuery根据相关复选框选择求和单元格
- 根据用户复选框选择显示或隐藏下拉框
- 复选框选择组合
- 如何根据角度中的复选框选择过滤结果
- 根据复选框选择 jQuery 更新文本框
- jquery选择复选框选择的值
- 复选框选择/取消选择触发器第一次工作,但在随后的尝试中失败
- 如何发布单选和复选框选择?表单由php和js处理
- 使用querySelectorAll进行的复选框选择不起作用
- 具有延迟的多个复选框选择以检查其他复选框更改
- 显示 jQuery 复选框选择
- 复选框选择似乎彼此不一致
- 一个变量,多个复选框选择/取消选择 jQuery
- 使用 Json 数据源在数据表中实现复选框选择
- 使用 Javascript 更新复选框选择时的输入字段
- 将复选框选择保留在多页分页中
- 在复选框选择后验证输入类型文本
- 如何根据 Javascript 中的复选框选择打开引导模式窗口
- 如何检测和获取 asp.net 中的复选框/选择框(html 标记)值