Question

这里有一堆复选框，

说，如果我点击任何复选框，我还要勾选下两个复选框（即旁边两个）

<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

任何人都可以帮助我，

提前致谢。

Answer 1

尝试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)
});

fiddle here

如果取消选中，则取消选中该复选框..

Answer 2

$(":checkbox").click(function () {
    $(this).parent().nextAll("td").slice(0, 2).find(":checkbox").prop('checked', true);
});

JSFIDDLE

Answer 3

或试试这个

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

Answer 4

试试这个，它可以根据需要切换效果。

这是脚本：

$(':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

Answer 5

试试这个

我在每个 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

Answer 6

Vanilla 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

Answer 7

使用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

Answer 8

试试这个工作脚本

    $('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

Answer 9

一种不同的方法。不使用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);
});

Answer 10

$(':checkbox').click(function(){
    $(this).parent().nextAll().slice(0,2).find(":checkbox").attr('checked',this.checked)
})

如何使用jquery一键检查复选框（3）

10 个答案: