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/