如果选中以下复选框，请选择前面的复选框答案

【问题标题】：Select preceeding checkbox if the following checkbox is checked如果选中以下复选框，请选择前面的复选框
【发布时间】：2016-05-04 10:56:28
【问题描述】：

如果复选框D被选中并且其他复选框被取消选中，我想选中复选框K和F，同样，如果复选框I被选中，则I前面的复选框被选中，后面的复选框被取消选中。我的html代码是：

<td><input type="checkbox" class= "knitting" name="knitting[]" value="1">K</td>
<td><input type="checkbox" class= "fmending" name="fmending[]" value="1">F</td>
<td><input type="checkbox" class= "dyeing" name="dyeing[]" value="1">D</td>
<td><input type="checkbox" class = "firon" name="firon[]" value="1">Y</td>
<td><input type="checkbox" class= "linking" name="linking[]" value="1">L</td>
<td><input type="checkbox" class="smending" name="smending[]" value="1">S</td>
<td><input type="checkbox" class="siron" name="siron[]" value="1">I</td>
<td><input type="checkbox" class="packing" name="packing[]" value="1">P</td>
<td><input type="checkbox" class="data" name="data[]" value="1">D</td>
<td><input type="checkbox" class="chalan" name="chalan[]" value="1">C</td>

而我为此所做的是：

$(".dyeing").click(function () {
    $(".knitting").prop("checked", true);
    $(".fmending").prop("checked", true);
    $(".firon").prop("checked", false);
    $(".linking").prop("checked", false);
    $(".smending").prop("checked", false);
    $(".siron").prop("checked", false);
    $(".packing").prop("checked", false);
    $(".data").prop("checked", false);
    $(".chalan").prop("checked", false);
});

这看起来乱七八糟，是不是还有一个很酷的过程？？？

【问题讨论】：

标签： javascript php jquery html checkbox

【解决方案1】：

您可以使用 :lt() 和 :gt() 选择器：

$(":checkbox").on('change',function () {
   var idx=$(this).index();
   $(":checkbox:lt("+idx+")").prop('checked',true);
   $(":checkbox:gt("+idx+")").prop('checked',false);             
});

检查下面的sn-p

var idx = 0;
var chk = $('table tr :checkbox');
$("table tr :checkbox").on('change', function() {
  var index = chk.index($(this));
  if (idx < index) {
    idx = index;
    $("table tr :checkbox:lt(" + idx + ")").prop('checked', true);
    $(":checkbox:gt(" + idx + ")").prop('checked', false);
  } else if (idx == index && !$(this).prop('checked')) {

    $(":checkbox").prop('checked', false);
  } else {
    idx = chk.index($(this));
    $(":checkbox:lt(" + idx + ")").prop('checked', true);
    $(this).prop('checked', true);
    $(":checkbox:gt(" + idx + ")").prop('checked', false);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="knitting" name="knitting[]" value="1">K</td>
      <td>
        <input type="checkbox" class="fmending" name="fmending[]" value="1">F</td>
      <td>
        <input type="checkbox" class="dyeing" name="dyeing[]" value="1">D</td>
      <td>
        <input type="checkbox" class="firon" name="firon[]" value="1">Y</td>
      <td>
        <input type="checkbox" class="linking" name="linking[]" value="1">L</td>
      <td>
        <input type="checkbox" class="smending" name="smending[]" value="1">S</td>
      <td>
        <input type="checkbox" class="siron" name="siron[]" value="1">I</td>
      <td>
        <input type="checkbox" class="packing" name="packing[]" value="1">P</td>
      <td>
        <input type="checkbox" class="data" name="data[]" value="1">D</td>
      <td>
        <input type="checkbox" class="chalan" name="chalan[]" value="1">C</td>
    </tr>
  </tbody>
</table>

【讨论】：

如何在表格中实现？
@Xravn 你的桌子怎么样？您可以使用 $('table tr :checkbox') selector 代替 $(' :checkbox'), 。当某些复选框未选中时，我也不知道您想要的行为，所以我对此进行了一些调整，请查看此链接：jsfiddle.net/5aL55wp9/1

【解决方案2】：

你可以的，

$("input[type='checkbox']").click(function() {
  if (this.checked)
    $("td:lt(" + $(this).closest("td").index() + ") input[type='checkbox']").prop("checked", this.checked);
});

Fiddle

【讨论】：

但如果再次取消选中我的复选框，则以下选项未被选中
你只是查了一下，但没有工作，例如请检查复选框 C 并取消选中 Y 我需要取消选中 Y 之后的所有复选框
不，但它的下降给出的答案是 woking 顺便说一句谢谢哥们

【解决方案3】：

**编辑：此解决方案适用于您不想仅选中/取消选中连续复选框的情况，但可以根据单击的复选框选中/取消选中任何复选框。

是的，您可以添加多个类，例如染色假，针织真等到复选框。另外，给每个复选框一个数据属性，例如data-name="染色"。

现在，

$("input[type=checkbox]").on("click", function(){
  if( $(this).is(":checked") )
  {
    var name = $(this).attr("data-name");
    $("input."+name+"false").prop("checked", false);
    $("input."+name+"true").prop("checked", true);
  }//if
});//click handler

【讨论】：