<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代码实现效果
时间: 2023-07-02 22:09:35 浏览: 59
下面是补全的 JS 代码,实现全选、全不选和反选的功能:
```html
<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:
```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'));
});
});
```
这样,当用户点击任意一个全选复选框时,就可以实现对该行中所有复选框的全选或取消全选操作了。
load.jsp为<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <form action="load.action"> <table> <tr><td>userID:</td><td><input type="text" name="userID" id="userID"></td></tr> <tr><td>password:</td><td><input type="password" name="password" id="password"></td></tr> <tr><td colspan="2"><input type="checkbox" name="remeber">记住我</td></tr> <tr><td><input type="submit" value="登录"></td></tr> </table> </form> </body> </html>判断user是否能够登录成功,如果可以重定向到showAllProducts.jsp页面,将代码补全
假设登录成功的条件为:userID 和 password 均为 "admin",则可以使用以下代码补全:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String userID = request.getParameter("userID"); // 获取提交的 userID
String password = request.getParameter("password"); // 获取提交的 password
if("admin".equals(userID) && "admin".equals(password)){
response.sendRedirect("showAllProducts.jsp"); // 重定向到 showAllProducts.jsp 页面
}else{
out.println("登录失败,请检查用户名和密码是否正确"); // 输出登录失败信息
}
%>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form action="load.action">
<table>
<tr><td>userID:</td><td><input type="text" name="userID" id="userID"></td></tr>
<tr><td>password:</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td colspan="2"><input type="checkbox" name="remeber">记住我</td></tr>
<tr><td><input type="submit" value="登录"></td></tr>
</table>
</form>
</body>
</html>