Javascript复选框验证:如果用户没有't选中特定复选框

Javascript checkbox validation: how to alert if user didn't check a particular checkbox?

本文关键字：复选框 验证 如果 用户 Javascript      更新时间：2024-04-10

所以我所做的就像是一个简单的药物提醒，所以系统显示用户应该服用的药物列表，然后用户勾选他们已经服用的药物的复选框，但我想做的是，例如，如果用户只勾选了药物一和药物二，然后我想要一个提醒，说"你为什么不服用第三种药物？"然后会出现一个下拉框，其中列出了用户可以选择的可能原因。如果用户只服用了第三种药物，系统会显示警报，说"你为什么没有服用第一和第二种药物？"，并出现下拉框，列出可能的原因。如果用户勾选了所有三个复选框，则显示一条警告，说"太棒了！干得好！"

<form>
<input type="checkbox" name="a" value="one">Medicine One<br>
<input type="checkbox" name="b" value="two">Medicine Two<br>
<input type="checkbox" name="c" value="three">Medicine Three<br>
<input id=xbutton type="button" onClick="validate()" value="Submit">
</form>

我知道如何对一个复选框（如条款协议复选框）进行验证，但对于如何将这么多验证规则合并到一个函数中，我有点困惑。

使用querySelectorAll迭代所有checkbox元素并检查.checked属性。

返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先预排序遍历）。返回的对象是NodeList。

CCD_ 4将仅选择那些不是CCD_ 5的元素。

function validate() {
  var msg = [];
  [].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) {
    msg.push(elem.name);
  });
  alert(msg.length ? 'Please check ' + msg.join(' and ') : 'All are checked!');
}
<form>
  <input type="checkbox" name="a" value="one">Medicine One
  <br>
  <input type="checkbox" name="b" value="two">Medicine Two
  <br>
  <input type="checkbox" name="c" value="three">Medicine Three
  <br>
  <input id=xbutton type="button" onClick="validate()" value="Submit">
</form>

Fiddle here

使用jquery可以帮助您简化操作。

这是小提琴：https://jsfiddle.net/swaprks/zs7tpuo0/

HTML:

<form>
    <input type="checkbox" name="a" value="one">Medicine One<br>
    <input type="checkbox" name="b" value="two">Medicine Two<br>
    <input type="checkbox" name="c" value="three">Medicine Three<br>
    <input id=xbutton type="button" value="Submit">
</form>

JAVASCRIPT:

$("#xbutton").click(function(){
    validate();
});
function validate(){
    if ( $('input[type="checkbox"]:not(:checked)').length == 3 ) {
    alert("Select atleast one option.");
  }
}
相关文章：