Checkbox inside button?

I think its not a valid mark up to place a checkbox within a button. It would be better to replace the button with span or div and apply some CSS to span or div to make look like button and apply click event to that and change the checkbox state.

Just an example for you


I'm not entirely sure what you're trying to achieve here, so please forgive me if my answer isn't what you were looking for. If you want a button which changes the state of a checkbox, then @thecodeparadox's answer should work great, however if you're looking for a button which performs a function but also has a checkbox inside of it which can be toggled, you might want something like the following:

HTML:

<div id="button" href="#">
    <input type="checkbox" class="check">Submit
</div>​

CSS:

body {
    margin: 10px;
}
#button {
    display: inline-block;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
.check {
    display: inline-block;
    margin-right: 10px;
}

jQuery:

$('#button').on('click', function() {
    window.location = '#';
})​

http://jsfiddle.net/QStkd/278/