jquery 监听 <input class="checkbox" type='checkbox' 的变化

你可以使用 jQuery 的 `change()` 方法来监听 `<input>` 标签的变化，具体实现如下： ```javascript $(".checkbox").change(function() { if(this.checked) { // 当选择框被选中时执行的代码 } else { // 当选择框被取消选中时执行的代码 } }); ``` 在上面的例子中，我们使用了类选择器 `.checkbox` 来选中所有的 `<input>` 标签，并使用 `change()` 方法来监听这些标签的变化。当选择框被选中时，`this.checked` 属性会返回 `true`，我们可以在条件语句中编写相关的代码。同理，当选择框被取消选中时，`this.checked` 属性会返回 `false`，我们也可以在条件语句中编写相关的代码。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div> <button>批量删除</button> </div> <table> <thead> <tr> <th><label><input type="checkbox" /></label></th> <th>学号</th> <th>姓名</th> <th>专业</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><label><input type="checkbox" /></label></td> <td>9527</td> <td>唐伯虎</td> <td>国画</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>007</td> <td>武松</td> <td>体育</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1024</td> <td>诸葛亮</td> <td>心理学</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1010</td> <td>刘义</td> <td>计算机</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>6969</td> <td>晨儿</td> <td>桑蚕技术</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>666</td> <td>章三</td> <td>小龙虾烹饪</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>5520</td> <td>里斯</td> <td>天文</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> <a href="#">尾页</a> <a href="#">下一页</a> <a href="#">上一页</a> <a href="#">首页</a> </td> </tr> </tfoot> </table> <script> 如何实现删除功能？

可以通过以下步骤实现删除功能： 1. 给每个“删除”按钮添加一个点击事件监听器。 2. 在事件监听器中获取被点击的行。 3. 从表格中移除该行。代码示例： ``` $('button:contains("删除")').click(function() { $(this).closest('tr').remove(); }); ``` 这段代码会给所有包含“删除”文本的按钮添加点击事件监听器。在监听器中，使用 `closest` 方法获取被点击按钮所在的行，并使用 `remove` 方法将其从表格中移除。

前端以该格式<tr><td><input type="checkbox" class="c1"></td><td>01(pid)</td><td>毛巾(pname)</td><td>生活用品(cname)</td><td><form action="deleteProductByPid.action">展示数据库信息，数据库有两个表，类别表category表里有cid和cname，商品表product表里有pid、pname和外键cid。该需求的前端和后端代码

好的，以下是一个简单的前端和后端代码示例：前端代码（使用jQuery库）： ```html <!DOCTYPE html> <html> <head> <title>商品列表</title> </head> <body> <table> <thead> <tr> <th></th> <th>编号</th> <th>商品名称</th> <th>商品类别</th> <th>操作</th> </tr> </thead> <tbody id="product-list">  </tbody> </table> <button id="delete-selected">删除选中</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 在页面加载完成后，向后端请求商品列表，并展示到页面上 $.get("/getProductList", function(data) { var productList = ""; for (var i = 0; i < data.length; i++) { var product = data[i]; productList += "<tr>"; productList += "<td><input type='checkbox' class='c1' value='" + product.pid + "'></td>"; productList += "<td>" + product.pid + "</td>"; productList += "<td>" + product.pname + "</td>"; productList += "<td>" + product.cname + "</td>"; productList += "<td><button class='delete-product' data-pid='" + product.pid + "'>删除</button></td>"; productList += "</tr>"; } $("#product-list").html(productList); }); // 监听删除按钮的点击事件，发送删除请求到后端 $("#delete-selected").on("click", function() { var selectedProducts = []; $(".c1:checked").each(function() { selectedProducts.push($(this).val()); }); if (selectedProducts.length == 0) { alert("请选择要删除的商品"); return; } if (!confirm("确定要删除选中的商品吗？")) { return; } $.post("/deleteProducts", { pids: selectedProducts }, function(data) { if (data.success) { alert("删除成功"); window.location.reload(); } else { alert("删除失败：" + data.message); } }); }); // 监听单个删除按钮的点击事件，发送删除请求到后端 $("#product-list").on("click", ".delete-product", function() { var pid = $(this).data("pid"); if (!confirm("确定要删除编号为" + pid + "的商品吗？")) { return; } $.post("/deleteProduct", { pid: pid }, function(data) { if (data.success) { alert("删除成功"); $(this).closest("tr").remove(); } else { alert("删除失败：" + data.message); } }.bind(this)); }); }); </script> </body> </html> ``` 在这个示例中，我们使用jQuery库来简化前端代码的编写。页面加载完成后，我们向后端发送一个GET请求，获取商品列表数据，并将数据展示到页面上。同时，我们为每个商品添加了一个复选框和一个删除按钮，当用户勾选复选框并点击删除按钮时，会向后端发送一个POST请求，请求地址为`/deleteProduct`或`/deleteProducts`，具体请求地址根据是否选择了多个商品进行删除而不同。需要注意的是，这个示例中并没有展示如何从数据库中获取商品信息的后端代码，因此在实际应用中，您还需要编写后端代码来处理请求并返回商品信息。此外，这个示例中的样式也非常简陋，您可以根据实际需求添加更多的样式和交互效果。后端代码（使用Java语言和Spring框架）： ```java @Controller public class ProductController { @Autowired private ProductService productService; @GetMapping("/getProductList") @ResponseBody public List<Product> getProductList() { return productService.getAllProducts(); } @PostMapping("/deleteProduct") @ResponseBody public Map<String, Object> deleteProduct(@RequestParam("pid") String pid) { Map<String, Object> result = new HashMap<>(); try { productService.deleteProductByPid(pid); result.put("success", true); } catch (Exception e) { result.put("success", false); result.put("message", e.getMessage()); } return result; } @PostMapping("/deleteProducts") @ResponseBody public Map<String, Object> deleteProducts(@RequestParam("pids") String[] pids) { Map<String, Object> result = new HashMap<>(); try { productService.deleteProductsByPid(pids); result.put("success", true); } catch (Exception e) { result.put("success", false); result.put("message", e.getMessage()); } return result; } } @Service public class ProductService { @Autowired private ProductDao productDao; public List<Product> getAllProducts() { return productDao.getAllProducts(); } public void deleteProductByPid(String pid) { productDao.deleteProductByPid(pid); } public void deleteProductsByPid(String[] pids) { productDao.deleteProductsByPid(pids); } } @Repository public class ProductDao { @Autowired private JdbcTemplate jdbcTemplate; public List<Product> getAllProducts() { return jdbcTemplate.query("SELECT p.*, c.cname FROM product p JOIN category c ON p.cid = c.cid", new ProductRowMapper()); } public void deleteProductByPid(String pid) { jdbcTemplate.update("DELETE FROM product WHERE pid = ?", pid); } public void deleteProductsByPid(String[] pids) { String[] placeholders = new String[pids.length]; Arrays.fill(placeholders, "?"); String sql = "DELETE FROM product WHERE pid IN (" + String.join(",", placeholders) + ")"; jdbcTemplate.update(sql, (Object[]) pids); } private class ProductRowMapper implements RowMapper<Product> { @Override public Product mapRow(ResultSet rs, int rowNum) throws SQLException { Product product = new Product(); product.setPid(rs.getString("pid")); product.setPname(rs.getString("pname")); product.setCname(rs.getString("cname")); return product; } } } public class Product { private String pid; private String pname; private String cname; // 省略getter/setter方法 } ``` 在这个示例中，我们使用Java语言和Spring框架来编写后端代码。我们将前端发送的请求映射到对应的Controller方法中，并在Controller方法中调用Service方法来处理业务逻辑。Service方法中调用Dao方法来访问数据库。需要注意的是，这个示例中并没有展示如何配置Spring框架的相关配置文件，因此在实际应用中，您还需要编写相关配置文件来配置Spring框架。同时，这个示例中的Dao层使用了JdbcTemplate来简化访问数据库的代码，您也可以使用其他ORM框架来完成数据访问。

阅读全文

jquery 监听 <input class="checkbox" type='checkbox' 的变化

相关推荐

jQuery/JS监听input输入框值变化实例

js监听input输入框值的实时变化实例

用Vue.js实现监听属性的变化

用JQuery写的图片上加CheckBox

jquery对复选框(checkbox)的操作汇总

jquery checkbox 选中 取消 checkbox多选

jQuery操作checkbox

jQuery美化radio和checkbox

jquery-tailwind-checkbox-toggle

jQuery基于layui插件制作checkbox复选框选中代码.zip

jQuery之实战(checkbox,table)

JQuery操作checkbox、radio等示例

jQuery操作checkbox并获取选中值

浅谈jquery设置和获得checkbox选中的问题

JQuery对checkbox的操作 (01).zip

jquery Checkbox 全选 反选 全不选 多种实现方法

Js/Jquery 实现checkbox全选，反选，全不选

基于jQuery的CheckBox复选框代码，效果很酷哦

最新推荐

BootStrap实现带有增删改查功能的表格(DEMO详解)

C#ASP.NET网络进销存管理系统源码数据库 SQL2008源码类型 WebForm

(源码)基于ZooKeeper的分布式服务管理系统.zip

23python3项目.zip

技术资料分享AL422B很好的技术资料.zip

平尾装配工作平台运输支撑系统设计与应用

管理建模和仿真的文件

MATLAB遗传算法探索：寻找随机性与确定性的平衡艺术

如何在S7-200 SMART PLC中使用MB_Client指令实现Modbus TCP通信？请详细解释从连接建立到数据交换的完整步骤。

MAX-MIN Ant System：用MATLAB解决旅行商问题

jquery checkbox 选中取消 checkbox多选

jquery Checkbox 全选反选全不选多种实现方法