根据使用Javascript的组中的值选中或取消选中复选框

Question

I am really new to Javascript and know absolutely nothing about JQuery, so I apologize now for my newbie status.

I have an array of checkboxes (up to 18) that have the same name and class (can't change that fact):

<input type="checkbox" name="elective_id[]" value="112" class="elective_id">
<input type="checkbox" name="elective_id[]" value="128" class="elective_id">
<input type="checkbox" name="elective_id[]" value="135" class="elective_id">
<input type="checkbox" name="elective_id[]" value="322" class="elective_id" onClick="checkSister(322);">
<input type="checkbox" name="elective_id[]" value="323" class="elective_id" onClick="checkSister(323);">

Within that array will be 3 pairs of checkboxes that need their counterpart checked/unchecked when their pair is checked/unchecked. The three pairs are 320,321 & 322,323 & 345,346.

If checkbox with value 322 was selected, how can I automatically select the pair?

function checkSister(brother) {
 if (brother=="322") {
  document.getElementById("322").checked = true;        
  document.getElementById("323").checked = true;
 } else if (brother=="322") {
  document.getElementById("322").checked = true;        
  document.getElementById("323").checked = true;
 }
}

I know that is not right, but haven't figured out how to get the right variable selected, let alone deselected.

Any help you can provide would greatly be appreciated, Jim

Answer 1

You can do it easily without jquery using querySelectorAll

document.querySelectorAll("input[type='checkbox'][value='112']")[0].checked=true;

or you can query by name and value like this:

document.querySelectorAll("input[name='elective_id[]'][value='112']")[0].checked=false;

Answer 2

To convert that vanilla JavaScript to jQuery,

function checkSister(brother) {
    if (brother=="322") {
      $("#322").prop("checked") = true;        
      $("#323").prop("checked") = true;  
 } else if (brother=="322") {
      $("#322").prop("checked") = true;     
      $("#323").prop("checked") = true;  
     }
}