javascript - Array of Radio buttons directly related to array of Checkboxes -

specifically have range of 3 radio buttons, before range of 5 checkboxes, calculator field attached give different values depending on how many checkboxes selected.

example:

radio button: 1
radio button: 2
radio button: 3

checkbox: a
checkbox: b
checkbox: c
checkbox: d
checkbox: e

• if 1-2 checkboxes selected, value 50 each checkbox
• if 3 checkboxes selected, value 125
• if 4 checkboxes selected, value 155
• if 5(all) checkboxes selected, value 170

---

i have functionality working script:

<script type="text/javascript"> jquery(document).ready(function($){$('input[type="checkbox"]').on('change', function() {      if($('input[type="checkbox"]:lt(5):checked').length == 1) {         greeting = "50";     } else if ($('input[type="checkbox"]:lt(5):checked').length == 2) {       greeting = "100";     } else if ($('input[type="checkbox"]:lt(5):checked').length == 3) {        greeting = "125";     } else if ($('input[type="checkbox"]:lt(5):checked').length == 4) {         greeting = "155";     } else if ($('input[type="checkbox"]:lt(5):checked').length == 5) { greeting = "170";     };      document.getelementbyid("input_53_34").value = greeting;  }); }); </script> 

here need , not sure of best way accomplish:

• if radio button 1 selected - treat checkbox fields normal
• if radio button 2 selected - check checkboxes a,b,c
• if radio button 3 selected - check checkboxes a,b,c,d,e (all)
• if checkbox selection changed quantity(length) 2 or 4, switch radio button 1
• if checkbox selection a,b,c, or all, switch radio button 2 or 3 respectively

basically, radio button 2 3 specific checkboxes (a,b,c) while radio button 3 checkboxes

thanks tinygiant - closest working - jsfiddle

instead of using lot of consecutive if statements, use switch statements.

you have attack 2 directions.

to make radio buttons affect checkboxes

• attach click handler radio buttons
• reset checkboxes
• if 1st radio button clicked, nothing
• if 2nd radio button clicked, check 1st, 2nd, , 3rd checkboxes
• if 3rd radio button clicked, check checkboxes

to make checkboxes affect radio buttons.

• attach click handler checkboxes
• reset radio buttons
• if checkboxes checked, select 3rd radio button
• if 1st, 2nd , 3rd checkboxes checked, select 2nd radio button
• if other combination of checkboxes checked, select 1st radio button

$('input[type=radio]').click(function(){      $('input[type="checkbox"]').prop('checked',false);      switch(this.value) {          case "2":              $('input[type=checkbox]:nth-child(1), input[type=checkbox]:nth-child(2),input[type=checkbox]:nth-child(3)').prop('checked',true);              break;          case "3":              $('input[type=checkbox]').prop('checked',true);              break;        }  });  $('input[type=checkbox]').change(function(){      var checked = $('input[type=checkbox]:checked');      $('input[type=radio]').prop('checked',false);      console.log($('input[type=checkbox][value=1]:checked').length);      if(checked.length === 5) {          $('input[type=radio][value=3]').prop('checked',true);      } else if( $('input[type=checkbox][value=1]:checked').length              &&  $('input[type=checkbox][value=2]:checked').length              &&  $('input[type=checkbox][value=3]:checked').length             && !$('input[type=checkbox][value=4]:checked').length) {          $('input[type=radio][value=2]').prop('checked',true);      } else {          $('input[type=radio][value=1]').prop('checked',true);      }  });

<div id="radios">      <input type="radio" name="radio" value="1" checked>      <input type="radio" name="radio" value="2">      <input type="radio" name="radio" value="3">  </div>    <div id="boxes">      <input type="checkbox" name="checkboxes[]" value="1">      <input type="checkbox" name="checkboxes[]" value="2">      <input type="checkbox" name="checkboxes[]" value="3">      <input type="checkbox" name="checkboxes[]" value="4">      <input type="checkbox" name="checkboxes[]" value="5">  </div>    <!-- jquery -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>