如何使用jquery一键选中复选框(3)
how to make a checkboxes(3) checked at one click using jquery
这里有一堆复选框,
比如说,如果我点击了任何复选框,我想让接下来的两个复选框也被选中(即,在两个旁边)
<table border="1" cellspacing="0" width="450">
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
Fiddle
有人能帮我吗,
提前谢谢。
尝试使用nextAll()
和eq
来选择下两个。
$('input:checkbox').change(function(){
var obj=$(this).parent().nextAll(':eq(0),:eq(1)'); //eq(0) and (1) is the index of next two checkbox
obj.find(':checkbox').prop('checked',this.checked)
});
在这里摆弄
如果未选中,则取消选中复选框。。
$(":checkbox").click(function () {
$(this).parent().nextAll("td").slice(0, 2).find(":checkbox").prop('checked', true);
});
JSFIDDLE
试试这个吧,它有你想要的切换效果。
这是脚本:
$(':checkbox').click(function () {
if ($(this).is(":checked")) {
$(this).parent().nextAll("td").slice(0, 2).find(":checkbox").prop('checked', true);
}
else {
$(this).parent().nextAll("td").slice(0, 2).find(":checkbox").prop('checked', false);
}
});
这是正在工作的DEMO
或者尝试这个
var len = 2;
var selector = 'input:checkbox';
$(selector).click(function(){
var e = $(selector).index(this);
$(selector+':lt('+(e+len+1)+'):gt('+e+')')
.attr('checked', 'checked');
});
JSFiddle
试试这个
我在每个tr
上添加了按钮
$('button').on('click', function () {
$(this).parents('tr').find('td>input[type=checkbox]').each(function (i, j) {
if (i == 3) {
return false;
}
$(this).prop('checked', true);
})
})
JSFiddle
香草JS解决方案:
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for(var i=0,iLen=checkboxes.length; i<iLen; i++){
(function(i){
checkboxes[i].addEventListener('click',function(){
checkboxes[(i+1)%checkboxes.length].checked = true;
checkboxes[(i+2)%checkboxes.length].checked = true;
})
}(i))
}
JSFiddle
一种不同的方法。不是使用DOM,而是使用输入元素的数组。
也适用于第一个和最后一个元素(您没有指定是否需要)。
http://jsfiddle.net/Y7tR2/
$('input').change(function () {
var i = $.inArray(this, $('input'));
var n = i + 1;
var p = i - 1;
if (n >= $('input').length) n = 0;
if (p < 0) p = $('input').length - 1;
$('input').eq(n).attr("checked", $(this).attr('checked') ? true : false);
$('input').eq(p).attr("checked", $(this).attr('checked') ? true : false);
});
试试这个工作脚本
$('input[type="checkbox"]').click(function(obj){
if( $(this).is(':checked')) {
$(this).parent().nextAll().has(":checkbox").eq(0).find(":checkbox").attr('checked','checked');
$(this).parent().nextAll().has(":checkbox").eq(1).find(":checkbox").attr('checked','checked');
}else{
$(this).parent().nextAll().has(":checkbox").eq(0).find(":checkbox").removeAttr('checked');
$(this).parent().nextAll().has(":checkbox").eq(1).find(":checkbox").removeAttr('checked');
}
});
DEMO
$(':checkbox').click(function(){
$(this).parent().nextAll().slice(0,2).find(":checkbox").attr('checked',this.checked)
})
使用jquery的另一个解决方案:
$('input').on('click', function () {
var count=0;
$.each($(this).parents('tr').find('td>input[type=checkbox]'), function( index, value ) {
if($(value).is(":checked")){
count++;
} else if(count > 0 && count <= 2){
$(value).attr('checked', true);
count++;
}
});
})
JSFiddle
相关文章:
- 在服务器上创建一个复选框,使用 javascript 处理函数
- 选中复选框是否使用jquery选中
- 复选框说明使用javascript的检索问题
- PHP-AJAX复选框过滤器使用数据标记属性
- 如何在选中数组中的另一个复选框时使用 jquery 取消选中复选框
- 如何选中复选框是否使用javascript
- 在同一复选框上使用 2 个不同的脚本
- 如何在 JavaScript 中选中复选框?(不使用jQuery)
- 我如何通过 id 找到复选框并使用 JQuery 在字符串上应用属性
- 如何打开 html 上的 jQuery 对话框 复选框选中(使用 jQuery)
- 设置 HTML 复选框以使用 javascript 进行检查
- 如何在离子复选框中使用ngModel
- 文本的单事件函数,复选框,使用 Jquery 选择输入
- 选中复选框并使用jQuery启用相应的单选按钮
- 如何清除复选框当选中其他复选框时?使用java脚本
- 显示'复选框仅在选中特定复选框时使用
- 我如何创建一个下拉菜单与标签的复选框列表使用bootstrap
- 如何框架JSON数组从传递复选框值使用php
- 在jade中返回一个复选框值.使用node.js,express和Mongoose
- 如果一个复选框是使用jquery选中的,如何无法选中其他复选框