Javascript复选框验证：如果用户没有选中特定复选框，如何发出警报？答案

【问题标题】：Javascript checkbox validation: how to alert if user didn't check a particular checkbox?Javascript复选框验证：如果用户没有选中特定复选框，如何发出警报？
【发布时间】：2016-04-11 06:09:55
【问题描述】：

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

<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>

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

【问题讨论】：

标签： javascript function cordova validation phonegap-build

【解决方案1】：

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

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

input[type="checkbox"]:not(:checked) 将只选择那些不是checked 的元素。

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

【讨论】：

谢谢！有没有办法将两个警报放入同一个警报框中？就像不是显示两个警告框（一个不吃药一个，另一个不吃药两个），一个警告框可以显示“你为什么不吃药一和药二？”

【解决方案2】：

使用 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.");
  }
}

【讨论】：