checkbox-uncheck

Checkbox-Uncheck

This is a helper script for unchecking checkboexs in stuff using the govuk frontend toolkit

Using it

Just inclide the script in your clientside stuff - it will add a CHECKBOX_UNCHECK objectin the window.

setup()

The setup function is for handling checkboxes that uncheck other checkboxes ( ie, mutually exclusive responses ). Use it like this:

// in your markup, the checkboxes should have data-uncheck attributes...
// ...and be inside a div with the form-group class
<div class="form-group">
  <div class="multiple-choice">
    <input name="first" type="checkbox" value="first" data-uncheck="['second']" />
    <label for="first">first</label>
  </div>
  <div class="multiple-choice">
    <input name="second" type="checkbox" value="second" data-uncheck="['first']" />
    <label for="first">first</label>
  </div>
</div>

// then in a clientside script, just call the setup function
document.addEventListener('DOMContentLoaded', function () {
  window.CHECKBOX_UNCHECK.setup()
})

apply(clickable, container)

The apply function will uncheck all the checkboxes in a container when something is clicked. Use it like this:

// in a clientside script...
document.addEventListener('DOMContentLoaded', function () {
  window.CHECKBOX_UNCHECK.apply(
    #clickable-element,      // a selector for the thing that will be clicked
    #container-of-checkboxes  // a div with checkboxes ( and containers of checkboxes ) in
  )
})

Viewing the examples

To view the examples, check out the repo, install the dependencies and run the app, like this:

  git clone https://github.com/revilossor/checkbox-uncheck.git
  cd checkbox-uncheck
  npm i
  npm start

then go to localhost:8080

Running the tests

To run the tests, just do

npm test

checkbox-uncheck