Programmatically 'unchecking' a checkbox does not hide conditional content

I’m using js to uncheck some checkboxes - however conditionally revealed content doesn’t hide like it should.

Talking with @nickcolley it sounds like the conditional logic listens for clicks rather than the checked attribute.

I can update my js to use clicks instead, but it feels like something to consider - whether this code should be testing the state of the input rather than clicks.

I imagine automated tests / other js that does stuff with checkboxes might also have this issue.

---

FWIW I’m adding a ‘none of these’ type option in my checkboxes that then deselects others. This is my code (written by @alex-ju a few years ago):

  // Deselect main checkboxes when none ticked
  // Deselect none when main checkboxes ticked
  var $selectButtons = $('*[data-js-select="select"]')
  var $deSelectButtons = $('*[data-js-select="deselect"]')

  $selectButtons.on('click', function () {
    $deSelectButtons.attr('checked', false)
  })
  $deSelectButtons.on('click', function () {
    $selectButtons.attr('checked', false)
  })

[NickColley]

@Jordan-Hall thanks for the pointer.

It looks interesting but I don’t think it is appropriate here:

• the proposal cannot observe DOM attribute changes, only DOM events
• the proposal is only at stage 1 so it is not a native standard, it was proposed 2017, there is no indication that this has interest and will end up in ECMAScript

Whereas the other options are native standards that have wide browser support.

[NickColley]

I have done some more investigation into this and determined that Mutation Observers cannot work for this since they can only observe attribute changes not property changes.

This is the difference between element.value = 'test' and element.setAttribute('value', 'test').

Mutation Observers (ruled out)

I’ve created to show that only attribute changes can be observed: https://jsbin.com/qajudohulo/edit?js,console,output

Polling the DOM in a loop (broad support)

I imagine the issue with this is a performance impact since DOM queries can sometimes be expensive within a loop. https://jsbin.com/tuvuhek/3/edit?html,js,console,output

Patching Object.defineProperty (IE9+)

Patching the dom element with Object.defineProperty :

https://jsbin.com/ligezey/edit?html,js,console,output

ES6 Proxies (Edge, modern browsers)

ES6 Proxies work somewhat but our constructors for elements would need to return a proxied version of the element. https://jsbin.com/yubisoc/edit?html,js,console,output

Custom elements (Chromium browsers, Firefox, Safari (no support for [is]?))

Note - Polyfills exist for this approach to broaden support: https://github.com/ungap/custom-elements-builtin#all-possible-features-detections

Custom elements allow property to be observed:

https://jsbin.com/yeduzof/edit?html,js,console,output

Exposing methods from the component itself

Perhaps we could allow uses to set values via a custom method

const instance = new Component()
instance.init()
instance.setValue('test')