用于验证复选框的 JavaScript 函数答案

【问题标题】：JavaScript Function to validate checkbox用于验证复选框的 JavaScript 函数
【发布时间】：2018-11-28 17:30:42
【问题描述】：

我试图不允许同时选中两个复选框。这是我的香草 JS。我已经验证了该函数在选中一个时返回 true，而在两者都未选中时返回 false。单选框不是一个选项。

function valForm() {
  var both = document.getElementById("cEmail1" & "cPhone1");
  for (var i = 1; i <= 2; i++) {
    if (document.getElementById("cEmail1").checked) {
      return true;
    } else if (document.getElementById("cPhone1").checked) {
      return true;
    } else if (both.checked) {
      return false;
    } else {
      return false;
    }
  }
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">
  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
  <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
  <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>

【问题讨论】：

看看这个：stackoverflow.com/questions/11234622/…
为什么不使用单选按钮？
为什么不使用单选按钮？？
收音机的功能正是您想要的。为什么单选框不是一个选项？
else if (document.getElementById("cEmail1").checked && document.getElementById("cPhone1").checked) { 似乎是最合乎逻辑的代码。

标签： javascript html function validation checkbox

【解决方案1】：

如果单选框确实不是一个选项，那么您的代码存在一些问题。首先，您正在检查是否每个框都被选中，如果其中任何一个被选中，那么您将立即返回。第二个也是更大的问题是你的both 元素应该是未定义的。 JavaScript 中的& 是位运算符，getElementById 应该只返回一个元素。相反，您可以像这样实现逻辑 XOR 的等价物：

function valForm(){
     return document.getElementById("cEmail1").checked != document.getElementById("cPhone1").checked; 
}

【讨论】：

【解决方案2】：

您不能使用getElementById 同时获取两个元素，因此您需要使用&& 运算符分别检查它们。

你还需要先检查这个，因为这之前的两个if 语句会抢占这个检查。

function valForm() {
  var cEmail = document.getElementById("cEmail1");
  var cPhone1 = document.getElementById("cPhone1");
  if (cEmail.checked && cPhone1.checked) {
    console.log("false");
    return false;
  } else if (cEmail.checked || cPhone1.checked) {
    console.log("true");
    return true;
  } else {
    console.log("false");
    return false;
  }
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">
  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
  <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
  <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>

【讨论】：

【解决方案3】：

如果两者都没有被检查，这应该返回 false：

function valForm() {
  var email = document.getElementById("cEmail1");
  var phone = document.getElementById("cPhone1")
  if (email.checked && !phone.checked || !email.checked && phone.checked) {
    console.log('ok')
    return true;
  }
  console.log('no ok')
  return false;
}

<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()">


  <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label>
<input class="check1" id="cEmail1" type="checkbox" name="contactbyemail"  /></span>
  <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label>
<input class="check1" id="cPhone1" type="checkbox" name="contactbyphone"  /></span> <br />
  <div class="formSubmit"><input type="submit" value="Submit" /></div>
</form>
</div>

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.slectOne').on('change', function() {
   $('.slectOne').not(this).prop('checked', false);
   $('#result').html($(this).data( "id" ));
   if($(this).is(":checked"))
    $('#result').html($(this).data( "id" ));
   else
    $('#result').html('Empty...!');
});
});
</script>
</head>
<body>
<input type="checkbox" class="slectOne" data-id="1 selected"/>
<input type="checkbox" class="slectOne" data-id="2 selected"/>
<input type="checkbox" class="slectOne" data-id="3 selected"/>
<input type="checkbox" class="slectOne" data-id="4 selected"/>
<input type="checkbox" class="slectOne" data-id="5 selected"/>
<input type="checkbox" class="slectOne" data-id="6 selected"/>
<input type="checkbox" class="slectOne" data-id="7 selected"/>
<input type="checkbox" class="slectOne" data-id="8 selected"/>
<input type="checkbox" class="slectOne" data-id="9 selected"/>
<input type="checkbox" class="slectOne" data-id="10 selected"/>
<span id="result"></span>
</body>
</html>

这里也是一个很好的例子 https://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53

【讨论】：

这个问题与 jQuery 方法无关。
好好利用，最好的办法