Geek Answers Handbook

Checkbox button inside?

Is there a way to check a box inside a button?

At the moment, I have this solution:

<html> <body> <div id="menu"> <button><input type="checkbox" /></button> </div> </body> </html>

This is normal, it works fine with Chrome and Firefox ... but really terrible with IE, so I need another way to achieve this.

1 2

Any ideas? thanks

+4
source share
3 answers

I'm not quite sure what you are trying to achieve here, so please forgive me if my answer is not what you were looking for. If you want a button that changes the state of the flag, then @thecodeparadox's answer should work fine, however if you are looking for a button that executes a function but also has a flag inside it that you can switch, 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/

+4
source

I think this is not a valid mark to place a checkbox inside a button . It would be better to replace the button with a span or div and apply some CSS to the span or div to look like a button and apply the click event to it, and change the checkbox .

Just an example for you.

+7
source

Invalid markup, but you can spoof IE with jquery -

 <button>hi</button> $('button').prepend('<input type="checkbox" />');

Demo: http://jsfiddle.net/Gg9fG/

+1
source

More articles:


All Articles