如何检查下一个复选框?
问题描述:
我面对的问题是我有相同的“按钮复选框”,但是一旦点击其中一个,我只想要最接近的复选框选中并取消选中。如何检查下一个复选框?
<span class="button-checkbox">
<button type="button" class="btn btn-sm btn-default btn-private">
<i class="fa fa-square-o private"></i>
<button>
<input name="private" type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm btn-default btn-private">
<i class="fa fa-square-o private"></i>
<button>
<input name="private" type="checkbox" class="hidden" />
</span>
我目前使用的JavaScript代码是:
$(document).on("click", ".btn-private", function() {
$(this).find("i").toggleClass('fa-square-o fa-check-square-o');
$(this).find('input:checkbox').prop("checked", true);
})
出于某种奇怪的原因,$(this).find("i").toggleClass('fa-square-o fa-check-square-o');
正确切换的类,但似乎$(this).find('input:checkbox')
不能正确选择,因为如果我手动分配ID和$('#ID').prop("checked", true);
它得到正确检查。
有关我如何解决此问题的任何想法以及如何取消选中点击框,我们将不胜感激!
答
$(this).find('input:checkbox').prop("checked", true);
正在寻找button
内部的input
。
尝试按钮后,看着下一个元素:
$(this).next().find('input:checkbox').prop("checked", true);
这里是一个工作codepen: http://codepen.io/ZevanRosser/pen/wgjOQE
答
使用
$(document).on("click", ".btn-private", function() {
$(this).find("i").toggleClass('fa-square-o fa-check-square-o');
$(this).next().prop("checked", true); // here
})
否则,你在里面找复选框按钮。
定义最接近的,是否与next或prev相似? –