HTML: Is placing autonomous checkbox inside a button possible?

user_9950076 0
Viewed 74

I've found several examples of placing another control inside a clickable button, but always with result that it's handlers are taken over by the parent button:

var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  alert('Checkbox clicked')
};
checkbox.onchange = evt => {
  alert('Checkbox changed')
};
<button id="button" style="width: 150px;">
      ClickMe
      <input type="checkbox" id="checkbox" style="float: right;" />
    </button>

I'm curious if the checkbox could somehow efface the surrounding button in the click event processing sequence, in another word if clicking directly on the checkbox would change it's state and stopped propagating the click, while clicking on the button anywhere except the checkbox would send click event to the button (I suppose if the button wasn't an active element it would be so)

html javascript
3 Answers

In your code please disable the button when you mouse over the checkbox, and enable it when it is mouse out

code

var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
/*...Add this line...*/
checkbox.onmouseover = evt => {
  button.disabled = true
};
checkbox.onmouseout = evt => {
  button.disabled = false
};
/*...Add this line...*/
checkbox.onclick = evt => {
  alert('Checkbox clicked')
};
checkbox.onchange = evt => {
  alert('Checkbox changed')
};
<button id="button" style="width: 150px;">
      ClickMe
      <input type="checkbox" id="checkbox" style="float: right;"/>
    </button>

user_134236250

If I understand correctly - you want the button to register provided that the checkbox is unchecked. Have you tried using !checkbox.checked in an if statement when the button is clicked to allow/block the click.

user_141905430

You can not click on the checkbox input without clicking the button because the button is not only clickable but also is the parent of checkbox input but you can check if either the checkbox is check or not but using an if statement like (checkbox.checked) for checked checkbox or (!checkbox.checked)

Example

var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  if (checkbox.checked) {
    alert('Checkbox is checked');
  } else {
    alert('Checkbox is unchecked');
  }
}
<button id="button" style="width: 150px;">
  ClickMe
  <input type="checkbox" id="checkbox" style="float: right;" />
</button>
Or if you want the button do not raise pop while checkbox is checked or uncheck you can simply disable the button for short time while checkbox is clicked but you won't use an alert in that case you'll use confirm in order to get set condition based on the checkbox pop

Example

var button = document.getElementById('button');
button.onclick = evt => {
  alert('Button clicked')
};
var checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  button.setAttribute('disabled', '');
  if (checkbox.checked) {
    x = confirm('Checkbox is checked');
    setTimeout(
      () => {
        if (x || !x) {
          button.removeAttribute('disabled', '');
        }
      }, 100);
  } else {
    confirm('Checkbox is unchecked');
    setTimeout(
      () => {
        if (x || !x) {
          button.removeAttribute('disabled', '');
        }
      }, 100);
  }
}
<button id="button" style="width: 150px;">
  ClickMe
  <input type="checkbox" id="checkbox" style="float: right;" />
</button>

user_135368930
Related