通过jQuery单击标签时选中和取消选中复选框

Question

我想要简单的切换类型按钮。我明白了，但有一些问题。单击标签复选框已选中，但无法选中剩余的复选框。我使用类是因为我通过 asp 中继器获得了未知数量的复选框。

我的 HTML 是enter code here

$(".labcbox").click(function () {
  var selectedIndex = $('.labcbox').index($(this));
  if ($(".toggin").is(':checked')) {
    $(".toggin")[selectedIndex].checked = false;
  }
  else {
    $(".toggin")[selectedIndex].checked = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>  
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox"></label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
  <tr>
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox"></label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
</table>

Answer 1

没有必要使用 jQuery，你可以简单地将你的复选框包裹在 label 标签中。

<label>Click to check
  <input type="checkbox">
</label>

Answer 2

这里有一个解决方案https://jsfiddle.net/pLq5ep80/

$(".labcbox").click(function () {
  $(this).siblings('input.toggin').prop('checked', !$(this).siblings('input.toggin').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox">Checkbox 1</label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
  <tr>
    <td>CheckBox toggle</td>
    <td>
      <input type="checkbox" class="toggin" />
      <label class="labcbox">Checkbox 2</label>
      <div class="divmark">
        Hypertention
      </div>
    </td>
  </tr>
</table>

希望这会对你有所帮助。