如何使用jquery一键选中复选框(3)

how to make a checkboxes(3) checked at one click using jquery

本文关键字:复选框 何使用 jquery 一键      更新时间:2024-04-27

这里有一堆复选框,

比如说,如果我点击了任何复选框,我想让接下来的两个复选框也被选中(即,在两个旁边)

<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