单击文本以选中复选框
Clicking text to select checkbox
JSFiddle Here
这是下拉菜单中的复选框列表。我希望能够单击锚标签的文本以选中相应的复选框。但是,我目前将其设置为 <a href="#">
它只是关闭下拉列表并转到页面顶部(在我自己的版本上,而不是 JSFiddle,因为它在叠加层上)。
我看到一个选择了复选框的解决方案,但每次单击时下拉列表仍然关闭,有没有简单的方法来解决这个问题?
您可以将标签用于此功能。将您的<ul>
列表替换为此列表。
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="check_1"/>
<label for="check_1">Item 1</label>
</li>
<li>
<input type="checkbox" id="check_2"/>
<label for="check_2">Item 2</label>
</li>
<li>
<input type="checkbox" id="check_3"/>
<label for="check_3">Item 3</label>
</li>
</ul>
这将帮助你
$('.dropdown-menu a').click(function(event){
event.preventDefault();
var checkBox = $(this).find(':checkbox');
checkBox.prop("checked", !checkBox.prop("checked"));
})
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<label for="display">Display</label><br/>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="display" data-toggle="dropdown">
Select Options
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<input type="checkbox">Item 1</a>
</li>
<li>
<a href="#">
<input type="checkbox">Item 2</a>
</li>
<li>
<a href="#">
<input type="checkbox">Item 3</a>
</li>
</ul>
</div>
你可以这样实现它。
$('a').on("click",function(e) {
e.preventDefault();
var checkbox = $(this).children("input");
$(checkbox[0]).attr('checked', !checkbox.attr('checked'));
});
小提琴 : http://jsfiddle.net/u614sy0L/5/
相关文章:
- 复选框与文本内联-JS问题
- 根据文本值禁用复选框
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Javascript选中/取消选中所有复选框并将值写入文本区域
- 获取文本框中所有选定复选框的值
- 动态选中文本区域中现有项目的复选框组
- 选中复选框时更改文本框值
- 单击每个表格行中的复选框时启用文本框
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 在 AngularJs 中触发文本框的复选框
- 基于复选框 Jquery 更新文本框
- 根据复选框选择 jQuery 更新文本框
- 我无法禁用带有复选框的文本框
- 从选中的复选框中获取所有值,并将其放入文本区域
- 如何使用选中的复选框文本自动填充输入文本字段
- 如何隐藏复选框文本
- 改变输入的火灾功能;使用jQuery标记(复选框/文本框)
- 选中复选框文本不变
- 我怎么能得到一个复选框文本在<光>标记,并在jQuery中的另一个标签中显示
- 可能添加CSS到一些JS样式禁用复选框文本