jeudi 12 septembre 2019

Check/Uncheck mutiple checkboxes by checking/Unchecking one checkbox

Hi I know my question title is confusing but I will try to explain all here. Please look at my code first:

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

What I am here doing is when I select/unselect checkbox First it automatically selects/unselects checkbox A and similarly when I select/unselect checkbox Second it automatically select/unselect checkbox B. I have used code so that one First or Second checkbox will be checked at one time and not the both. So when I select checkbox First it selects checkbox A and when I select checkbox Second without unchecking First then both A and B are selected. And when I again select First without unselecting Second then both A and B remains checked. This is not what I want. I want that when someone check First then A should be selected that is happen now but when some one select Second the checkbox of A should be unselected itself just as checkbox first is unselected. I want to make it like this form: [website:] https://www.swiftcomarine.com.au/BOAT-PACKAGE-SPECIALS-X15.html

You can see on rightside of the website that when someone check standard package then some checkboxes selected automatically below it and when premium package is checked other checkboxes are selected automatically and the checkboxes that selected previously unchecked it self. That is what I want with my form. Please help me in this regard. Thanks




Aucun commentaire:

Enregistrer un commentaire