Question

我试图不允许同时选中两个复选框。这是我的香草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>

Answer 1

如果不是真的不能选择单选框，则您的代码存在一些问题。首先，您要检查是否每个框都被选中，如果两个框都被选中，则您将立即返回。第二个更大的问题是您的both元素应未定义。 JavaScript中的&是按位运算符，getElementById应该只返回一个元素。相反，您可以实现等效的逻辑XOR，如下所示：

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

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

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

Answer 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

用于验证复选框的JavaScript函数

4 个答案: