<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>
时间: 2023-07-19 15:40:41 浏览: 151
使用<input>实现checkbox
你所提供的代码已经是一个表格行(`<tr>`)了,如果你想添加多行,可以在表格中添加多个类似的行,每个行中的复选框可以设置不同的 `name` 属性值,这样就可以在表单提交时分别获取各个复选框的值。同时,可以通过 jQuery 实现全选或取消全选的功能,具体的实现方法可以参考我之前回答的问题。下面是示例代码:
HTML:
```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:
```javascript
$(function() {
// 给全选复选框绑定 click 事件
$('input[name="all"]').on('click', function() {
var $items = $(this).closest('td').find('input[type="checkbox"]');
$items.prop('checked', $(this).prop('checked'));
});
});
```
这样,当用户点击任意一个全选复选框时,就可以实现对该行中所有复选框的全选或取消全选操作了。
阅读全文