js input type=checkbox

在 JavaScript 中，可以使用以下方式检查复选框的状态：

1. 通过 `document.getElementById()` 获取复选框元素，例如：

   <input type="checkbox" id="myCheckbox">

   var checkbox = document.getElementById("myCheckbox");

2. 使用 `checked` 属性检查复选框是否被选中，例如：

   if (checkbox.checked) {
     // 复选框已经被选中
   } else {
     // 复选框未被选中
   }

3. 使用 `addEventListener()` 添加事件监听器，例如：

   checkbox.addEventListener("change", function() {
     if (this.checked) {
       // 复选框已经被选中
     } else {
       // 复选框未被选中
     }
   });

注意，如果有多个复选框需要检查，可以使用 `document.querySelectorAll()` 或类似的方法获取所有复选框元素，然后使用循环逐一检查。

相关问题

<h4>爱好</h4> 爬山：<input type="checkbox" name="hobby" value="爬山"> 游泳：<input type="checkbox" name="hobby" value="游泳"> 滑雪：<input type="checkbox" name="hobby" value="滑雪"> 长跑：<input type="checkbox" name="hobby" value="长跑"> <input type="button" value="全选" onclick="checkboxSelectAll()"> <input type="button" value="全不选" onclick="checkboxSelectNone()"> <input type="button" value="反选" onclick="checkboxSelectReverse()"> 补全JS代码实现效果

下面是补全的 JS 代码，实现全选、全不选和反选的功能：

<script>
  function checkboxSelectAll() {
    var checkboxes = document.getElementsByName("hobby");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = true;
    }
  }

  function checkboxSelectNone() {
    var checkboxes = document.getElementsByName("hobby");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = false;
    }
  }

  function checkboxSelectReverse() {
    var checkboxes = document.getElementsByName("hobby");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = !checkboxes[i].checked;
    }
  }
</script>

<tr> <td>爱好</td> <td > <input name="like" type="checkbox" value="0" checked="true"/>读书 <input name="like" type="checkbox" value="0" checked="true"/>听歌 <input name="like" type="checkbox" value="0"/>手游 <input name="like" type="checkbox" value="0"/>体育 <input name="all" type="checkbox" value="0"/>全选 </td> </tr>为以上代码添加<tr> <td>爱好</td> <td > <input name="like" type="checkbox" value="0" checked="true"/>读书 <input name="like" type="checkbox" value="0" checked="true"/>听歌 <input name="like" type="checkbox" value="0"/>手游 <input name="like" type="checkbox" value="0"/>体育 <input name="all" type="checkbox" value="0"/>全选 </td> </tr>

你所提供的代码已经是一个表格行（`<tr>`）了，如果你想添加多行，可以在表格中添加多个类似的行，每个行中的复选框可以设置不同的 `name` 属性值，这样就可以在表单提交时分别获取各个复选框的值。同时，可以通过 jQuery 实现全选或取消全选的功能，具体的实现方法可以参考我之前回答的问题。下面是示例代码：

HTML:

<table>
  <tr>
    <td>爱好</td>
    <td>
      <input name="like" type="checkbox" value="0" checked="true">读书
      <input name="like" type="checkbox" value="1" checked="true">听歌
      <input name="like" type="checkbox" value="2">手游
      <input name="like" type="checkbox" value="3">体育
      <input name="all" type="checkbox" value="0">全选
    </td>
  </tr>
  <tr>
    <td>兴趣爱好</td>
    <td>
      <input name="interest" type="checkbox" value="0" checked="true">旅游
      <input name="interest" type="checkbox" value="1" checked="true">美食
      <input name="interest" type="checkbox" value="2">摄影
      <input name="interest" type="checkbox" value="3">绘画
      <input name="all" type="checkbox" value="1">全选
    </td>
  </tr>
</table>

JavaScript:

$(function() {
  // 给全选复选框绑定 click 事件
  $('input[name="all"]').on('click', function() {
    var $items = $(this).closest('td').find('input[type="checkbox"]');
    $items.prop('checked', $(this).prop('checked'));
  });
});

这样，当用户点击任意一个全选复选框时，就可以实现对该行中所有复选框的全选或取消全选操作了。