jquery mobile 页面加载实现checkbox全选

最新推荐文章于 2023-03-21 20:54:57 发布

fontmate

最新推荐文章于 2023-03-21 20:54:57 发布

阅读量2.4k

点赞数

分类专栏： JavaWeb 文章标签： jquery jqm jquerymob

本文链接：https://blog.csdn.net/bigjelly/article/details/10313651

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

最近需求遇到的问题

1 两层div 外层父级checkbox框内层子级checkbox框

2 实现页面一加载父级子级全部选中

实现方法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <link rel="stylesheet" href="../ui-desgin/css/jquery.mobile-1.1.2.css" />
    <script src="../ui-desgin/scripts/jquery-1.7.2.js"></script>
    <script src="../ui-desgin/scripts/jquery.mobile-1.1.2.js"></script>
    <title></title>
    <style type="text/css">
           .outcheckbox{

           }
        .inner{

        }
    </style>
    <script type="text/javascript">
        $(function(){

            $(".outcheckbox").find("input[type='checkbox']").attr('checked','true');
        })

    </script>
</head>
<body>
      <div id="page" data-role="page" data-theme="b">
          <div data-role="header">
              <h3>测试页面</h3>
          </div>
          <div id="content" data-role="content">
                  <div class="outcheckbox">
                      <label for="test1">里面的checkbox1</label>
                      <input type="checkbox" id="test1" checked="">
                      <div class="inner" style="width:10em;">
                          <label for="test11">里面的checkbox11</label>
                          <input type="checkbox" id="test11" checked="">
                      </div>
                  </div>
                  <div class="outcheckbox">
                      <label for="test2">外面的checkbox2</label>
                      <input type="checkbox" id="test2" checked="">
                      <div class="inner" style="width:10em;">
                          <label for="test22">里面的checkbox22</label>
                          <input type="checkbox" id="test22" checked="">
                      </div>
                  </div>
              </div>
      </div>
</body>
</html>

实现效果：