Interactive Components with Hyperscript

author: Marcus A. Lee

published on: March 24, 2024, 5:12 a.m.

tags: #Web Development

Introduction

Creating interactive front-end components in HTML can often require complex JavaScript, but with Hyperscript, you can simplify this process. Hyperscript allows you to directly define behaviors and interactions in your HTML, making it a great choice for tasks like toggling multiple checkboxes, and many more.

We’ll explore how to use Hyperscript to toggle multiple checkboxes, including a button to reset all checkboxes and another to select them all.

Toggling Checkboxes with Hyperscript

One of the easiest ways to toggle multiple checkboxes using Hyperscript is by targeting their class and modifying their checked attribute when an event (like a button click) occurs. Let’s walk through an example.

Here’s how you can create two buttons: - A Reset Button to uncheck all checkboxes. - A Select All Button to check all checkboxes.

<!-- Hyperscript Reset Button -->
<input 
    type="reset"
    class="btn btn-primary"
    _="on click set .checkbox.checked to false">

<!-- Hyperscript Select All Button -->
<input 
    type="button" 
    class="btn btn-primary" 
    value="Select All" 
    _="on click set .checkbox.checked to true">

When you click either button, Hyperscript will target all elements with the checkbox class and toggle their checked attribute accordingly.

Checkboxes in a Dynamic Context

Checkboxes can either be hardcoded or dynamically generated based on data from a backend model. For example, if you have a context variable transactions (from a Django model), you can use a loop to display checkboxes along with additional data:

{% for transaction in transactions %}
<tr>
    <td>{{ forloop.counter }}</td> 
    <td>
        <input 
            type="checkbox" 
            class="checkbox checkbox-xs"
            _="on load set my.checked to false" />
    </td>
    <td>{{ transaction.amount }}</td>
    <td>
        <div class="relative flex">
            <input 
                type="text" 
                placeholder="Type here" 
                class="text-xs input input-ghost w-full max-w-xs" />
        </div>
    </td>
</tr>
{% endfor %}

In this example:

  • Each row represents a transaction, and a checkbox is rendered for each entry.
  • The on load Hyperscript event ensures that all checkboxes are unchecked by default.

One of several approaches to toggling many checkboxes using Hyperscript is to manipulate the checked, unchecked, and indetermined attribute by targeting the element's class after a specific event.

Putting It All Together: A Complete Example

Here’s a complete implementation showcasing the "Reset All" and "Select All" buttons alongside a few checkboxes:

<section class="border rounded-xl p-4">
  <h2 class="text-lg font-bold mb-4">Example:</h2>

  <!-- Button Controls -->
  <div class="my-6 flex gap-4">
    <input 
        type="reset"
        class="btn btn-primary"
        _="on click set .checkbox.checked to false"
        value="Reset All">
    <input 
        type="button" 
        class="btn btn-primary" 
        value="Select All" 
        _="on click set .checkbox.checked to true">
  </div>

  <!-- Employee Table -->
  <div class="overflow-x-auto">
    <table class="table w-full">
      <thead>
        <tr>
          <th class="text-left">Select</th>
          <th class="text-left">Employee Name</th>
          <th class="text-left">Position</th>
          <th class="text-left">Department</th>
        </tr>
      </thead>
      <tbody>
        <!-- Record 1 -->
        <tr class="hover">
          <td>
            <input type="checkbox" class="checkbox checkbox-sm" />
          </td>
          <td>Jane Doe</td>
          <td>Software Engineer</td>
          <td>Technology</td>
        </tr>
        <!-- Record 2 -->
        <tr class="hover">
          <td>
            <input type="checkbox" class="checkbox checkbox-sm" />
          </td>
          <td>John Smith</td>
          <td>Product Manager</td>
          <td>Product</td>
        </tr>
        <!-- Record 3 -->
        <tr class="hover">
          <td>
            <input type="checkbox" class="checkbox checkbox-sm" />
          </td>
          <td>Emily Johnson</td>
          <td>Data Analyst</td>
          <td>Analytics</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Example:

Select Employee Name Position Department
Jane Doe Software Engineer Technology
John Smith Product Manager Product
Emily Johnson Data Analyst Analytics