Select All checkbox Javascript solution?
Has anyone found a javascript or other solution for a "select all" checkbox that would allow a user to check one checkbox to automatically check all others in the category filter form? Many of the solutions I've found won't work because of the arrays, but I can't seem to get anything working.
HTML
{exp:low_search:form channel="projects" status="Open|Closed|Featured" query="{segment_3}" results="20" result_page="resources/projects"}
<fieldset>
<div class="toggle blog-toggle">
<h4> <i class="plus"></i>Your Region</h4>
<div class="toggle-content toggle-opened">
<input type="checkbox" name="selectall" id="selectall">
<label for="selectall">Select All Regions</label>
{exp:channel:categories category_group="8" show="43|46|133" id="filter"}
<input type="checkbox" name="category:region[]" value="{category_id}"{if low_search_category:region ~ '/(^|\|)'.category_id.'($|\|)/'}checked="checked"{/if}>
<label for="category:region[]">{category_name}</label>
{/exp:channel:categories}
</div>
JS
$(document).ready(function(){
// below code is used to remove all check property if user select/unselect options using checkbox.
$("input[name='category:region[]']").click(function(){
$("#selectall").prop("checked", false);
});
// js for Check/Uncheck all CheckBoxes by Checkbox
$("#selectall").click(function(){
$("input[name='category:region[]']").prop("checked",$("#selectall").prop("checked"))
})
});
Replies
Low 1 Mar 2015 10:02
You don't necessarily have to use the name="" attribute as the selector. You could also use a class name, or a different type of selector.