Question

您好，我知道我的问题标题令人困惑，但我会在这里尝试解释所有问题。请先查看我的代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        </head>

        <body>
            <input type="checkbox" class="check" id="firstCheck" onclick="myFunction();"> First<br>
            <input type="checkbox" class="check" id="secondCheck" onclick="myFunction1();"> Second <br>
            <input type="checkbox" id="new"> A <br>
            <input type="checkbox" id="new1"> B <br>

        </body>
        <script>
            function myFunction() {
            var checkBox = document.getElementById("firstCheck");
  //var text = document.getElementById("text");
            if (checkBox.checked == true){
    //text.style.display = "block";
            document.getElementById("new").checked = true;

    } 
            else if (checkBox.checked == false){
            document.getElementById("new").checked = false;
    }
            else {
            text.style.display = "none";
    }

}

function myFunction1(){
  var checkBox = document.getElementById("secondCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true){
    //text.style.display = "block";
    document.getElementById("new1").checked = true;
  } 
  else if (checkBox.checked == false){
  document.getElementById("new1").checked = false;
  }
  else {
     text.style.display = "none";
  }
}
        </script>

        <script>
$(document).ready(function(){
    $('.check').click(function() {
        $('.check').not(this).prop('checked', false);
    });
});
</script>
    </html>

我在这里要做的是，当我选择/取消选择复选框时，首先它会自动选择/取消选择复选框A，类似地，当我选择/取消选择复选框时，它会自动选择/取消选择复选框B。我使用了代码，因此第一个或第二个复选框将一次被选中，而不是同时被选中。因此，当我选择复选框“第一”时，它会选择复选框A；而当我选择复选框“第二”而未取消选中“第一”时，则同时选择了A和B。当我再次选择“第一”而不取消选择“第二”时，A和B都保持选中状态。这不是我想要的。我希望当某人选中“首先，然后选择A”时，现在应该选择它，但是当某个人选择“第二”时，应该取消选中A本身的复选框，就像未选中“ first first”一样。我想使它像这样的形式： [网站：] https://www.swiftcomarine.com.au/BOAT-PACKAGE-SPECIALS-X15.html

您可以在网站的右侧看到，当某人选中标准软件包时，会自动在其下方选择某些复选框，并在选中高级软件包时自动选中其他复选框，而先前选中的复选框则会自动对其进行取消选中。那就是我想要的表格。请在这方面帮助我。谢谢

Answer 1

以下是适合您的要求的小提琴。

https://jsfiddle.net/y5tkphmr/2/

我在复选框A和B中添加了一个类。我添加了一个名为resetCheckBoxes的函数，该函数通过在您的function1和function2之前调用此方法来取消选择复选框。

 <script>


  function resetCheckBoxes(){
       $(".reset").prop('checked', false);
  }
  function myFunction() {
  resetCheckBoxes();
  var checkBox = document.getElementById("firstCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true) {
    //text.style.display = "block";
    document.getElementById("new").checked = true;

  } else if (checkBox.checked == false) {
    document.getElementById("new").checked = false;
  } else {
    text.style.display = "none";
  }

}

function myFunction1() {
resetCheckBoxes();
  var checkBox = document.getElementById("secondCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true) {
    //text.style.display = "block";
    document.getElementById("new1").checked = true;
  } else if (checkBox.checked == false) {
    document.getElementById("new1").checked = false;
  } else {
    text.style.display = "none";
  }
}


$(document).ready(function() {
  $('.check').click(function() {
    $('.check').not(this).prop('checked', false);
  });
});

  </script>

Answer 2

从CarstenLøvboAndersen js小提琴链接中添加第13行和第29行，这些分别是：

document.getElementById("new1").checked = false;

document.getElementById("new").checked = false;

通过选中/取消选中一个复选框来选中/取消选中多个复选框

2 个答案: