Checkbox inside button?

html, javascript, jquery

Solution

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/

Problem

Is there any way to get a checkbox inside a button? At the moment I have this solution: ``` <html> <body> <div id="menu"> <button><input type="checkbox" /></button> </div> </body> </html> ``` It's ok, it works fine with Chrome and Firefox...but really awful with IE, so I need another way to achieve this goal. Any ideas? Thanks

Original source