Select all checkboxes using hyperscript

Question

I'm trying to select all checkbox from a click event on a button, but I cannot found a way to do it propertly, here is the best code that I can think of:

<p><strong><span _="on change from <input[name='test']/> or load
                    put (<input[name='test']:checked/>).length into me"></span></strong> selected</p>

<button _="on click add @checked to <input[name='test']/>">Select All</button>
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />

<script src="https://unpkg.com/hyperscript.org@0.9.11"></script>

But unfortunately its not working, it adds a checked="undefined" on all checkboxes, all get checked, but when I uncheck some it stops working. Seems like I shouldn't use the checked attribute, maybe use the checked property thought javascript.

The solution must use the Hyperscript library ( https://hyperscript.org )

What exactly isn't working? There's no javascript here. What have you tried? — mykaf, Aug 25 '23 at 14:55
Please add the relevant code to the question itself. Links can break and are therefore not available to future readers. But there's also no script in your codepen; it's identical to what you posted here. What have you tried to make the action work? — mykaf, Aug 25 '23 at 15:36
Relevant code is already added, this codepen only contains this code. — Tiago, Aug 25 '23 at 15:39
This is a hyperscript question ( https://hyperscript.org/ ) , this part is the script itself `_="on click add @checked to "` — Tiago, Aug 25 '23 at 15:40
@DanielBlack it works, but I also need to raise the change event, looking on another threads the best way to do it its to call the click() method on each input, but I'm not sure how to call the click() method on every input. — Tiago, Aug 25 '23 at 17:47

score 1 · Answer 1 · answered Aug 25 '23 at 15:43

1

Here is my solution:

function selectAll() {
  let checkBoxes = document.querySelectorAll("input[type=checkbox]");
  checkBoxes.forEach(checkBox => {
    checkBox.checked = true;
  });
}

<button onclick="selectAll()">Select All</button>
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />

answered Aug 25 '23 at 15:43

The KNVB

3,588
3
29
54

1

Thanks for the contribution, probably I wast not clear on my question, but I need a solution using Hyperscript ( https://hyperscript.org ) – Tiago Aug 25 '23 at 15:46

Tiago · Accepted Answer · 2023-08-25T18:53:17.247

Found a way to do it, more verbose than I wanted to, but it works. I had to use the click() method to trigger the change event, only setting the checked property to true was not enough, because my checked counter need to listen to the changed event.

<button _="on click  
           set value to ((<input[name='test']:not(:checked)/>).length == 0)
           repeat in <input[name='test']/>
             set it.checked to value
             it.click() 
           end">Select All</button>
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />

<p><strong><span _="on change from <input[name='test']/> or load
                    put (<input[name='test']:checked/>).length into me"></span></strong> selected</p>

<script src="https://unpkg.com/hyperscript.org@0.9.11"></script>

Select all checkboxes using hyperscript

2 Answers2