6

有没有办法在按钮内获得一个复选框？

目前我有这个解决方案：

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

没关系，它在 Chrome 和 Firefox 上运行良好……但在 IE 上真的很糟糕，所以我需要另一种方法来实现这个目标。

1 2

有任何想法吗？谢谢

4

3 回答 3

7

我认为将 a 放在 acheckbox内不是有效标记button。最好将其替换为buttonorspan并将div一些CSS应用于spanordiv使其看起来像button并将click事件应用于该事件并更改checkbox状态。

只是给你一个例子

于 2012-06-15T06:56:43.327 回答
6

我不完全确定你想在这里实现什么，所以如果我的答案不是你想要的，请原谅我。如果您想要一个更改复选框状态的按钮，那么@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;
}

​<strong>jQuery：

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

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

于 2012-06-15T09:35:55.677 回答
1

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

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

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

于 2012-06-15T06:52:36.813 回答