选中多个复选框之一时执行功能答案

【问题标题】：Execute function when one of many checkboxes are checked选中多个复选框之一时执行功能
【发布时间】：2016-07-20 19:12:37
【问题描述】：

我在表格中有一些复选框，如下所示：

    <table id="checkBoxTable" class="uk-margin-small-top uk-hidden checkBoxTable" style="width:100%">
        <tr>
            <td><label id="1"><input name="1" type="checkbox"> 12am-1am</label</td>
            <td><label id="2"><input name="2" type="checkbox"> 1am-2am</label</td>
            <td><label id="3"><input name="3" type="checkbox"> 2am-3am</label></td>
            <td><label id="4"><input name="4" type="checkbox"> 3am-4am</labe</td>
       </tr>
    </table>

我想在检查任何复选框时执行函数。我一直在尝试以下方法：

$('#checkBoxTable').change(function(){
        var price = 10 * originalPrice;
        $('#price').value = price + "";

    });

【问题讨论】：

if($('#checkBoxTable :checkbox:checked').length)

标签： javascript html checkbox onchange

【解决方案1】：

目标复选框输入[type="checkbox"]

$('#checkBoxTable input[type="checkbox"]').change(function(){
    var price = 10 * originalPrice;
    $('#price').value = price + "";
 });

【讨论】：

【解决方案2】：

您正在选择#checkBoxTable，即表的id。您应该使用#checkBoxTable :checkbox 来选择checkbox 元素。

$('#checkBoxTable :checkbox:checked' 将返回 checked 输入元素。

var originalPrice = 100;
$('#checkBoxTable :checkbox').change(function() {
  if ($('#checkBoxTable :checkbox:checked').length) {
    var price = 10 * originalPrice;
    alert(price);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="checkBoxTable" class="uk-margin-small-top uk-hidden checkBoxTable" style="width:100%">
  <tr>
    <td>
      <label id="1">
        <input name="1" type="checkbox">12am-1am</label>
    </td>
    <td>
      <label id="2">
        <input name="2" type="checkbox">1am-2am</label>
    </td>
    <td>
      <label id="3">
        <input name="3" type="checkbox">2am-3am</label>
    </td>
    <td>
      <label id="4">
        <input name="4" type="checkbox">3am-4am</label>
    </td>
  </tr>
</table>

Fiddle demo

【讨论】：