When checking one check box the other check box must disappear

user_5743264 0
Viewed 537

I have put together this section of code which does what it's supposed to do. The only problem is when I deselect the first checkbox the shopping cart box remains. I want the top box to be the master, so if that's not selected the program will display nothing. Here's what I have so far:

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>

html javascript
4 Answers

You can effectively simulate what you want in your shoppingcartFunction() by unchecking #shopping_cart and calling shoppingcart1Function() directly.

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>

user_86561260

Besides the use of radioButtons, you can try this function:
[JQUERY FRAMEWORK REQUIRED!!]

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

});

You can react for box checks in this function, here you can add or remove the other one if you want.

user_31875390

First: If you want hierarchical structure - make the html appropriate. Put the second checkbox and the rest in the "master" element. Second: don't use p where div belongs to.

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>

user_51349800

If I undestand you, you want to hide all what is inside the p with id="text1". So just get it with var text1 = document.getElementById("text1"); and set its display to "none" if the first checkbox is not checked, otherwise do nothing. 

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";
  }
}

But you will have a problem: if the user checks the first checkbox, and than the second (with id="shopping_cart"), all what inside the p with id="text2" will be displayed. If now the user unchecks the first checkbox, the second one and all what is inside the p with id="text1" will be hide. If again the user checks the first checkbox, the second one will be diplayed and it is checked but the p with id="text1" will not be shown.

To solve this second problem: 

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";
  }
}
user_71937610
Related