这是我的代码：
HTML：
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
JavaScript：
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
我从这里获得了代码。我的问题是我无法让它工作。
有人可以帮忙吗？
您必须包含 jQuery 和 BebeLikeCheckbox 插件才能实现此功能。 这是更新的小提琴：http://jsfiddle.net/mq8Zq/174/
因此在您的 HTML 文档中：
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="relative/path/to/plugin/or/cdn"></script>
<script>
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
</script>
遗憾的是，该示例页面没有解释任何内容......
查看页面的源代码，似乎必须包含jquery和行为的扩展
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.radio.checkbox.behavior.js"></script>
您需要包含一些 JS 文件：JQuery 和复选框的插件。 像这样：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://www.digitss.com/jquery/jquery.radio.checkbox.behavior.js"></script>
</head>
<body>
<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>
<script>
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
});
</script>
</body>
</html>
您唯一要做的就是为您的收音机指定一个不同的“名称”。当您为它们输入相同的名称时，只有一个被“选中”。
此代码允许单选按钮表现得像复选框一样，在第二次单击时取消选中它。它使用 for 属性将 mousedown 事件处理程序添加到链接到单选按钮。
<input type="radio" id="myRadio1" name="options">
<label for="myRadio1">Click me 1</label>
<input type="radio" id="myRadio2" name="options">
<label for="myRadio2">Click me 2</label>
<script>
document.querySelectorAll('label').forEach(label => {
label.addEventListener('mousedown', () => {
const input = document.getElementById(label.attributes.for.value);
if (!input.checked) {
return;
}
const mouseUpHandler = () => {
requestAnimationFrame(() => {
input.checked = false;
label.removeEventListener('mouseup', mouseUpHandler);
});
};
label.addEventListener('mouseup', mouseUpHandler);
})
});
</script>
使 type="checkbox" 和名称相同