Selective check box selector

[jimandy]

Its been a long time since I coded and it shows. Example problem is this.
I have three check box lines, two for Jim, and one for bob.
In the code test below, with Option A active, all three become checked (not want I want)
If Option B is active, it fails.

jim<input class='jim' type="checkbox"/>
bob<input class='bob' type="checkbox"/>
jim<input class='jim' type="checkbox"/>
<div id="checkme">Check All</div>
<div id="uncheckme">Uncheck All</div>
<script>
    function checkedAll(isChecked) {
 /**** options for lines in test ********/  
/* Option A */
    var c = document.querySelectorAll('input[type="checkbox"]');

/* Option B */
    //var c = document.querySelectorAll('input[class = ".jim"]');
/****************************************/
        for (var i = 0; i < c.length; i++){
            c[i].checked = isChecked;
        }
    }

checkme.addEventListener('click', function(){
   checkedAll(true);
});

uncheckme.addEventListener('click', function(){
   checkedAll(false);
});
</script>

I'm using 'class' as the selector but could use any other in the HTML lines like "name" if that would work.
Your patience with this old man will be appreciated.

 

[VBService]

Check out this scenario [ working code on-line ]

<div class="container">
  <label><input class="jim" type="checkbox"/>Jim</label>
  <label><input class="bob" type="checkbox"/>Bob</label>
  <label><input class="jim" type="checkbox"/>Jim</label>
  <label><input class="jim" type="checkbox"/>Jim</label>
  <label><input class="bob" type="checkbox"/>Bob</label>

  <button id="check-jim">Check only <span>Jim's</span></button>
  <button id="check-bob">Check only <span>Bob's</span></button>
  <button id="check-all">Check all</button>
  <button id="uncheck-all">Uncheck all</button>
</div>

<script>
  function setCheckboxes(checkboxes, isChecked) {
    // [...checkboxes].map(ch => ch.checked = isChecked); // instead of a for loop
    for (const checkbox of checkboxes)
      checkbox.checked = isChecked;
  }

  function handleButtonClick(e) {
    let checkboxes = document.querySelectorAll('input[type="checkbox"]'); // ('[type="checkbox"]') working too

    if (e.target.matches('button#check-all')) { // ('#check-all') working too
      setCheckboxes(checkboxes, true);
      return;
    }

    if (e.target.matches('button#uncheck-all')) {
      setCheckboxes(checkboxes, false);
      return;
    }

    if (e.target.matches('button#check-jim, button#check-jim span')) { // ('#check-jim, #check-jim span') working too
      setCheckboxes(checkboxes, false);
      checkboxes = [...checkboxes].filter(ch => ch.matches('.jim'));
      setCheckboxes(checkboxes, true);
      return;
    }

    if (e.target.matches('button#check-bob, button#check-bob span')) {
      setCheckboxes(checkboxes, false);
      checkboxes = [...checkboxes].filter(ch => ch.matches('.bob'));
      setCheckboxes(checkboxes, true);
      return;
    }
  }

  document.querySelector('.container')
    .addEventListener('click', handleButtonClick);
</script>


<!-- For demonstration purposes -->
<style>
  label {
    display: flex;
    justify-content: space-between;
    width: 3rem;
  }
  label input {
    margin-right: .55rem;
  }
  button {
    margin-top: .5rem;
    text-transform: uppercase;
    font: 700 .7rem/1.2 system-ui, monospace, sans-serif;
    cursor: pointer;
    color: black;
    transition: color 150ms;
  }
  button::first-letter {
    font-size: 135%;
  }
  button#check-all:hover {
    color: darkgreen;
  }
  button#uncheck-all:hover {
    color: darkred;
  }

  button#check-jim span {
    color: limegreen;
  }
  button#check-bob span {
    color: darkblue;
  }
</style>

[ How JavaScript Event Delegation Works ] [ element.matches() ] [ Spread syntax [...] ]

 

[VBService]

If Option B is active, it fails.

See the differences

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox"/></label>

<script>
  const b1 = document.querySelectorAll('input[class="jim"]');
  const b2 = document.querySelectorAll('[class="jim"]');
  const b3 = document.querySelectorAll('input.jim');
  const b4 = document.querySelectorAll('.jim');
 
  console.log('b1', b1, '\nb2', b2, '\nb3', b3, '\nb4', b4);
</script>

because

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>

<style>
  /* const b1 = document.querySelectorAll('input[class="jim"]'); */
  input[class="jim"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: background-color 150ms;
  }
  input[class="jim"]:checked {
    background-color: rgba(0, 255, 0, .6);
  }
</style>

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>

<style>
  /* const b2 = document.querySelectorAll('[class="jim"]'); */
  [class="jim"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: background-color 150ms;
  }
  [class="jim"]:checked {
    background-color: rgba(0, 255, 0, .6);
  }
</style>

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>

<style>
  /* const b3 = document.querySelectorAll('input.jim'); */
  input.jim {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: background-color 150ms;
  }
  input.jim:checked {
    background-color: rgba(0, 255, 0, .6);
  }
</style>

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>

<style>
  /* const b4 = document.querySelectorAll('.jim'); */
  .jim {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: background-color 150ms;
  }
  .jim:checked {
    background-color: rgba(0, 255, 0, .6);
  }
</style>

and even

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>

<style>
  /* const b = document.querySelectorAll('input:not(.bob)'); */
  input:not(.bob) {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: background-color 150ms;
  }
  input:not(.bob):checked {
    background-color: rgba(0, 255, 0, .6);
  }
</style>

<label>jim<input class="jim" type="checkbox"/></label>
<label>bob<input class="bob" type="checkbox"/></label>
<label>jim<input class="jim" type="radio" name="jim"/></label>
<label>jim<input class="jim" type="checkbox" checked/></label>
<label>bob<input class="bob" type="radio" name="bob" checked/></label>
<label>jim<input class="jim" type="radio" name="jim"/></label>

<style>
  /*
    const b = document.querySelectorAll('input:not(.bob)[type="checkbox"]');
    it's like: if (class !== 'bob' && type === 'checkbox')
  */
  input:not(.bob)[type="checkbox"] {
    --border-radius: .15rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid grey;
    padding: .4rem;
    border-radius: var(--border-radius);
    border-top-left-radius: 50%;
    display: inline-block;
    margin: 0 .25rem;
    transition: all 450ms;
  }
  input:not(.bob)[type="checkbox"]:checked {
    background-color: rgba(0, 255, 0, .6);
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: 50%;
  }
</style>

 

[jimandy]

<label>jim<input class="jim" type="checkbox"/></label>

Beautiful! Just what I was looking for.
THANKS!