目录结构


  1. baigoCheckall.js 全选插件
  2. baigoCheckall.min.js 全选插件压缩版
  3. readme.txt 使用说明

使用方法


载入 jQuery 库文件,jQuery 库文件请到 http://www.jquery.com 下载,例:

<script src="jquery.min.js" type="text/javascript"></script>

载入 baigoCheckall 核心文件,例:

<script src="baigoCheckall.min.js" type="text/javascript"></script>

在需要操作的 checkbox 中定义 id 和 data-parent,其中,id 代表选框本身,data-parent 代表父元素的 id,例:


<input type="checkbox" id="first" data-parent="none">
<input type="checkbox" id="second_1" data-parent="first">
<input type="checkbox" id="second_2" data-parent="first">
<input type="checkbox" id="second_3" data-parent="first">
<input type="checkbox" id="second_4" data-parent="first">

特别提示:v1.0 之前,由 class 定义父元素的 id,v1.0 之后改为 data-parent 属性。

初始化插件,例:

<script type="text/javascript">
$(document).ready(function(){
  $("#form_demo").baigoCheckall();
});
</script>

当用户选中 id 为 first 的选框的时候,data-parent 为 first 的选框将全部被选中,反之则为未选中;当任意一个 data-parent 为 first 的选框未被选中时,id 为 first 的选框也会处于未被选中状态。

返回顶部
 

演示 Demo

演示代码

<form id="form_demo">
  <div class="checkbox">
    <label for="first">
      <input type="checkbox" id="first" data-parent="none">
      全选
    </label>
  </div>

  <div>
    <label for="second_1" class="checkbox-inline">
      <input type="checkbox" id="second_1" data-parent="first">
      选项-1
    </label>

    <label for="third_1_1" class="checkbox-inline">
      <input type="checkbox" id="third_1_1" data-parent="second_1">
      子项-1
    </label>

    <label for="third_1_2" class="checkbox-inline">
      <input type="checkbox" id="third_1_2" data-parent="second_1">
      子项-2
    </label>

    <label for="third_1_3" class="checkbox-inline">
      <input type="checkbox" id="third_1_3" data-parent="second_1">
      子项-3
    </label>

    <label for="third_1_4" class="checkbox-inline">
      <input type="checkbox" id="third_1_4" data-parent="second_1">
      子项-4
    </label>
  </div>

  <div class="checkbox">
    <label for="second_2">
      <input type="checkbox" id="second_2" data-parent="first">
      选项-2
    </label>
  </div>

  <div class="checkbox">
    <label for="second_3">
      <input type="checkbox" id="second_3" data-parent="first">
      选项-3
    </label>
  </div>

  <div class="checkbox">
    <label for="second_4">
      <input type="checkbox" id="second_4" data-parent="first">
      选项-4
    </label>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function(){
  $("#form_demo").baigoCheckall();
});
</script>

返回顶部
 

下载


Github

https://github.com/baigoStudio/baigoCheckall

baigoCheckall v1.0 [ 2016-02-29 ]

baigoCheckall v0.1.0 [ 2014-12-09 ]

baigoCheckall v0.0.9 [ 2014-05-15 ]

  • «
  • 1
  • »

 

资助我们


baigo Studio 是一个纯公益组织,几乎没有资金来源,同时我们还必须承担一些费用,比如服务器租用等。旗下的软件均为开源项目,为了能让我们的项目能够继续发展,我们需要用户的帮助。