Question

有没有办法在按钮内设置一个复选框？

目前我有这个解决方案：

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

没关系，它适用于Chrome和Firefox ......但是IE真的很糟糕，所以我需要另一种方法来实现这个目标。

1 http://i46.tinypic.com/15p4ynk.png 2 http://i46.tinypic.com/2regz9c.png

有什么想法吗？感谢

Answer 1

我认为将checkbox置于button之内并不是一个有效的标记。最好将button替换为span或div，并将一些CSS应用于span或div，使其看起来像{{ 1}}并将button事件应用于该事件并更改click状态。

<强> Just an example for you

Answer 2

我不完全确定你在这里想要达到的目标，所以如果我的回答不是你想要的，请原谅我。如果你想要一个改变复选框状态的按钮，那么@ thecodeparadox的答案应该很好用，但是如果你正在寻找一个执行功能的按钮，但也有一个可以切换的复选框，你可能想要如下所示：

<强> 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/

Answer 3

这不是有效的标记，但你可以用jquery欺骗IE -

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

演示：http://jsfiddle.net/Gg9fG/

复选框里面的按钮？

3 个答案: