Check/Uncheck checkboxes with Javascript

Question

I have developed a form that I have shown in the pic. The thing I want is that when I select checkbox A the checkboxes 1 and 2 should automatically selected and unselected similarly. And when I select checkbox B it should check checkboxes 3 and 4 automatically and unselect similarly. I also want another thing that checkboxes have associated price with it i.e. $20 in this case. So when the checkbox is selected its price is added in the total. for example if I select first 2 checkbox then total price should be $40. How can I do that with javascript? I know that this will be possible with javascript but I don't konw javascript for it. Thanks in advance.

<!DOCTYPE html>
<html>
<body>

<h1>Show checkboxes:</h1>
<div style="border:1px solid">
<form action="/action_page.php">
  <input type="checkbox"> A <br>
  <input type="checkbox"> B <br>

</form>
</div>

<div style="border:1px solid; margin-top:20px;">
<form action="/action_page.php">
  <input type="checkbox"> 1 &nbsp; $20 <br>
  <input type="checkbox"> 2 &nbsp; $20<br>
  <input type="checkbox"> 3 &nbsp; $20<br>
  <input type="checkbox"> 4 &nbsp; $20<br>
  <input type="checkbox"> 5 &nbsp; $20<br>
  <input type="checkbox"> 6 &nbsp; $20<br>

</form>
</div>
<br><br>
Total: 
</body>
</html

Yes there are few answers already there but I want to do it with javascript and previous answers mostly using jquery and the second thing is that I also want to add the prices associated with checkboxes. That is what I haven't find it on google.

What have you tried thus far to solve the problem? You haven't included any JavaScript whatsoever. — esqew, Sep 12 '19 at 12:55
Thanks. Yes I know that it will be done with javascript but I don't know about javascript that will be used for this purpose. That is why I am asking this question here. — ans11, Sep 12 '19 at 12:58
Possible duplicate of [Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)?](https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript-jquery-or-vanilla) — Peter B, Sep 12 '19 at 13:00
5 secs of google: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp — Thomas Ludewig, Sep 12 '19 at 13:03
Break it up into steps. Add onchange event handlers to the inputs. Read the checked state, select the other elements, toggle their checked state. It is a simple issue, do it in parts. — epascarello, Sep 12 '19 at 13:11

score 0 · Accepted Answer · answered Sep 12 '19 at 13:24

This is not your complete solution, but a working example, how it could be done. I think, you can use it for a start.

document.getElementById("a").addEventListener('click', function(event) {
 event.preventDefault();
 deselectAll();
 checkUncheckElement(1, true);
  checkUncheckElement(2, true);
  calculatePrice();
});

document.getElementById("b").addEventListener('click', function(event) {
 event.preventDefault();
  deselectAll();
 checkUncheckElement(3, true);
  checkUncheckElement(4, true);
  calculatePrice();
});

function deselectAll() {
  var elements = document.querySelectorAll('#main > form > input');
  for(var a = 0; a < elements.length; a++) {
   elements[a].checked = false;
  }
}

function checkUncheckElement(id, value) {
 document.getElementById(id).checked = value;
}

function calculatePrice() {
 var elements = document.querySelectorAll('#main > form > input');
  var price = 0;
  for(var a = 0; a < elements.length; a++) {
   if(elements[a].checked == true) {
     price = price + parseInt(document.getElementById('price' + elements[a].id).innerHTML);
    }
  }
      document.getElementById('total').innerHTML = '$' + price;
}

<h1>Show checkboxes:</h1>
<div style="border:1px solid">
<form action="/action_page.php">
  <input type="checkbox" id="a"> A <br>
  <input type="checkbox" id="b"> B <br>

</form>
</div>

<div style="border:1px solid; margin-top:20px;" id="main">
<form action="/action_page.php">
  <input type="checkbox" id="1"> 1 &nbsp; $<span id="price1">20</span><br>
  <input type="checkbox" id="2"> 2 &nbsp; $<span id="price2">20</span><br>
  <input type="checkbox" id="3"> 3 &nbsp; $<span id="price3">20</span><br>
  <input type="checkbox" id="4"> 4 &nbsp; $<span id="price4">20</span><br>
  <input type="checkbox" id="5"> 5 &nbsp; $<span id="price5">20</span><br>
  <input type="checkbox" id="6"> 6 &nbsp; $<span id="price6">20</span><br>
</form>
</div>
<br><br>
Total: <span id="total"></span>

Check/Uncheck checkboxes with Javascript

1 Answers1