jQuery完美实现全选反选不全选

最新推荐文章于 2022-08-29 21:32:04 发布

林花谢了春红

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量489

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/a1610770854/article/details/51489719

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jQueryDemo</title>
   <!--import jQuery-->
   <script src="jquery-1.12.4.js"></script>
   <script>
      $(function () {
         //全选
         $("#checkbox1").click(function () {
            //1.使用attr只能有效一次 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
            //$(":checkbox[name = 'items']").attr("checked",this.checked);
            //2.使用prop可以完美解决 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
            $(":checkbox[name = 'items']").prop("checked",this.checked);
         })
         //不全选
         $(":checkbox[name = 'items']").click(function () {
            $("#checkbox1").prop("checked",$(":checkbox[name = 'items']").length == $(":checkbox[name = 'item']:checked").length);
         })
         //反选
         $("#checkbox2").click(function () {
            $(":checkbox[name = 'items']").each(function () {
               $(this).prop("checked",!$(this).prop("checked"));
            })
         })
      })
   </script>
</head>
<body>
   <form>
      You favorite sports is<input type = "checkbox" id = "checkbox1" />Select All/Deselect All
      <input type = "checkbox" id = "checkbox2">Inverse Select
      <br />
         <input type = "checkbox" name = "items" value = "football" />football
         <input type = "checkbox" name = "items" value = "basketball" />basketball
         <input type = "checkbox" name = "items" value = "swim">swim
      <br />
      <!--<input type = "button" id = "checkAll" value = "SelectAll"/>-->
      <!--<input type = "button" id = "checkNo" value = "DeselectAll"/>-->
      <!--<input type = "button" id = "submit" value = "submit"/>-->
   </form>
</body>
</html>

林花谢了春红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery完美实现全选反选不全选

jQueryDemo $(function () { //全选 $("#checkbox1").click(function () { //1.使用attr只能有效一次对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //$(":checkbox[nam
复制链接

扫一扫