select_all-rails
Simple select and unselect all check-boxes

Basic Usage

How To Use

Call function:
select_all()
on parent check-box
i.e. "All Items"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Item 1, Item 2, Item 3, Item 4 

            
              HTML
              

                 <input  type="checkbox" id="selectAll">
                   <label for="selectAll" >
                      All Items
                   </label>
                 </input>
              

              Javascript
              

                $("#selectAll").select_all();
Multiple Selection
More than One Select All in a Page

How To Use

To Select Fruits
Call function:
select_all({class: 'fruits'})
on parent check-box
i.e. "All Fruits"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Mango, Apple, Banana, Orange

To Select Animals
Call function:
select_all({class: 'animals'})
on parent check-box
i.e. "All Animals"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Lion, Elephant, Tiger, Bear 

            
              HTML
              

                 <input  type="checkbox" id="selectAllFruits">
                 <label for="selectAllFruits" >
                      All Fruits
                 </label>
                </input>

                 <input  type="checkbox" id="selectAllAnimals">
                 <label for="selectAllAnimals" >
                      All Animals
                 </label>
                </input>
              

              Javascript
              

                $("#selectAllFruits").select_all({
                 class: "fruits"
                });

                $("#selectAllAnimals").select_all({
                 class: "animals"
                });
Ajax Added Checkboxes
Infinite Scroll with Select All

How To Use

To Auto Select 'All Items' which are going to get added from Infinite Scroll
Call function:
select_all({infinite_scroll_select: true})
on parent check-box
i.e. "All Items"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Item 1, Item 2, Item 3, Item 4,..

All the new checkboxes which are going to get added by infinite
scroll should have class selectable

Show more 
            
              HTML
              

                 <input  type="checkbox" id="infiniteCheckAll">
                 <label for="infiniteCheckAll" >
                      All Items
                 </label>
                </input>
              

              Javascript
              

                $("#infiniteCheckAll").select_all({
                 infinite_scroll_select: true
                });

Show Selected Count

How To Use

Call function:
select_all({show_count: "checked",
attach_count_to: "#showCarCount"})
on parent check-box
i.e. "All Cars"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Aston Martin, Bentley, Audi, BMW,..

Call function:
select_all({show_count: "unchecked",
attach_count_to:"#showColorCount"})
on parent check-box
i.e. "All Colors"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. Blue, Green, Yellow, Orange,..

Call function:
select_all({
show_count: "checked_with_total",
attach_count_to:"#showLangCount"})
on parent check-box
i.e. "All Languages"

Add class='selectable'
on children-checkboxes/sub-checkboxes
i.e. JAVA, C++, Javascript, Ruby,..

If "attach_count_to" parameter is not passed
then count will get attach to the parent checkbox as a sibling
i.e "All Cars" sibling 
            
              HTML
              

                 <input  type="checkbox" id="selectAllCars" >
                 <label for="selectAllCars" >
                      All Cars
                 </label>
                </input>

                 <input  type="checkbox" id="selectAllColors" >
                 <label for="selectAllColors" >
                      All Colors
                 </label>
                </input>

                 <input  type="checkbox" id="selectAllLanguages" >
                 <label for="selectAllLanguages" >
                      All Languages
                 </label>
                </input>
              

              Javascript
              

                $("#selectAllCars").select_all({
                 show_count: "checked",
                 attach_count_to: "#showCarCount"
                });

                $("#selectAllColors").select_all({
                 show_count: "unchecked",
                 attach_count_to: "#showColorCount"
                });

                $("#selectAllLanguages").select_all({
                 show_count: "checked_with_total",
                 attach_count_to: "#showLangCount"
                });