Javascript复选框验证:如何在用户未选中特定复选框时发出警报？

Question

所以我所做的就像是一个简单的药物提醒，这样系统就会显示用户应该服用的药物列表，然后用户会勾选他们已经服用的药物的复选框，但我想要做的是，如果用户只勾选了一号和二号药，那么我想要一个警报，上面写着“为什么你没有吃三号药？”并且出现具有用户可从中选择的可能原因的列表的下拉框。如果用户只服用了三号药，系统将显示警告“你为什么没有服用一号药和二号药？”，并出现一个列有可能原因的下拉框。如果用户已经勾选了所有这三个复选框，那么就会显示一个警告，上面写着“太棒了！干得好！”

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

我知道如何对一个复选框(如条款协议复选框)进行验证，但我对如何将如此多的验证规则合并到一个函数中感到有点困惑。

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

​

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