Question

我将这段代码放在一起，按照预期的方式工作。唯一的问题是，当我取消选择第一个复选框时，购物车框仍然存在。我希望机顶盒成为主机，因此如果未选择该程序，则程序将不显示任何内容。这是我到目前为止的内容：

function shoppingcartFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");

  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

function shoppingcart1Function() {
  // Get the checkbox
  var checkBox = document.getElementById("shopping_cart");
  // Get the output text
  var text = document.getElementById("text1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

Checkbox: <input type="checkbox" id="myCheck" onclick="shoppingcartFunction()">

<p id="text" style="display:none"><label for="sender_name">Shopping Cart:
<input type="checkbox" id="shopping_cart" onclick="shoppingcart1Function()">    <br /><br /></p>

<p id="text1" style="display:none"><label for="sender_name">Shopping Cart</label><br />
  <input type="text" id="shopping_car" pattern="[A-Za-z]{ ,30}" maxlength="30" title="Max 30 characters" name="shopping_car" size="30" required>*
  <br /><br /></p>

Answer 1

通过取消选中shoppingcartFunction()并直接调用#shopping_cart，可以有效地模拟shoppingcart1Function()中想要的内容。

function shoppingcartFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");

  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    
    document.getElementById("shopping_cart").checked= false;
    shoppingcart1Function();
    text.style.display = "none";
  }
}

function shoppingcart1Function() {
  // Get the checkbox
  var checkBox = document.getElementById("shopping_cart");
  // Get the output text
  var text = document.getElementById("text1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

 Checkbox: <input type="checkbox" id="myCheck" onclick="shoppingcartFunction()">

<p id="text" style="display:none"><label for="sender_name">Shopping Cart:
<input type="checkbox" id="shopping_cart" onclick="shoppingcart1Function()">    <br /><br /></p>

<p id="text1" style="display:none"><label for="sender_name">Shopping Cart</label><br />
    <input type="text" id="shopping_car" pattern="[A-Za-z]{ ,30}" maxlength="30" title="Max 30 characters" name="shopping_car" size="30" required>*
    <br /><br /></p>

Answer 2

除了使用radioButtons之外，您还可以尝试使用以下功能：
[需要JQUERY框架！]

// helper function to check the checkboxes
$(document).on("change", ".checkClass", function(event){

if($(this).attr( "checked") != "checked")
    //do something when box is unchecked
else
    //or when it becomes checked

});

您可以在此功能中对复选框进行反应，如果需要，您可以在此处添加或删除其他复选框。

Answer 3

首先：如果您想使用层次结构，请使html合适。将第二个复选框和其余复选框置于“主”元素中。第二：请勿使用p所属的div。

function shoppingcartFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");

  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

function shoppingcart1Function() {
  // Get the checkbox
  var checkBox = document.getElementById("shopping_cart");
  // Get the output text
  var text = document.getElementById("text1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

Checkbox: <input type="checkbox" id="myCheck" onclick="shoppingcartFunction()">

<div id="text" style="display:none"><label for="sender_name">Shopping Cart:</label>
  <input type="checkbox" id="shopping_cart" onclick="shoppingcart1Function()">

  <div id="text1" style="display:none"><label for="sender_name">Shopping Cart</label><br />
    <input type="text" id="shopping_car" pattern="[A-Za-z]{ ,30}" maxlength="30" title="Max 30 characters" name="shopping_car" size="30" required>*</div>
</div>

Answer 4

如果我不理解您，您想使用id =“ text1”隐藏p内部的所有内容。因此，只需使用var text1 = document.getElementById（“ text1”）;即可获得它。如果未选中第一个复选框，则将其显示设置为“无”，否则不执行任何操作。

function shoppingcartFunction() {
  // Get the checkbox
  alert("The first");
  var checkBox = document.getElementById("myCheck");

  // Get the output text
  var text = document.getElementById("text");
  var text1 = document.getElementById("text1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
    text1.style.display = "none";
  }
}

但是您会遇到一个问题：如果用户选中第一个复选框，然后选中第二个复选框（id =“ shopping_cart”），则显示p内所有id =“ text2”的内容。如果现在用户取消选中第一个复选框，则第二个以及p内id =“ text1”的所有内容都将被隐藏。如果用户再次选中第一个复选框，则第二个复选框将被显示并选中，但不会显示id =“ text1”的p。

要解决第二个问题：

function shoppingcartFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");

  // Get the output text
  var text = document.getElementById("text");
  var text1 = document.getElementById("text1");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
    var checkBox = document.getElementById("shopping_cart");
    if (checkBox.checked == true){
        text1.style.display = "block";
    }        

  } else {
    text.style.display = "none";
    text1.style.display = "none";
  }
}

选中一个复选框时，另一个复选框必须消失

4 个答案: