Boolean data-* Attributes [duplicate]

Answer 1

You can indeed use data-* attributes as if they were boolean attributes - however, as far as dataset is concerned is equivalent of . This means that unlike required or other boolean attributes you won't be able to do this:

var elementOfInterest = document.querySelector(".some-class");
if (elementOfInterest.dataset.on) {
    // We will never get here because dataset.on === ""
    // and "" == false
}

if (elementOfInterest.required) {
    // We *do* get here because required is a boolean attribute
}

Instead you'll need to do an explicit check against undefined:

if (elementOfInterest.dataset.on !== undefined) {
    // We will get here because "" !== undefined
}

This gives you no way of distinguishing between data-on and data-on="", but if you are treating it as a boolean attribute, they both add up to the same thing anyway (only the absence of the attribute indicates falsity.)