Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Nov 15, 2020
1 star
md`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter1" class="filter">
<form action='#'>
<fieldset>
<legend>
<label>
<input type="checkbox" value="all" checked>
<span>Select All in Filter 1</span>
</label>
</legend>
<p>
<label>
<input type="checkbox" name="filter" value="v1" checked>
<span>F1: Value1</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v2" checked>
<span>F1: Value2</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v3" checked>
<span>F1: Value3</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v4" checked>
<span>F1: Value4</span>
</label>
</p>
</fieldset>
<input type="submit" value="Apply">
</form>
</div>
<div id="filter2" class="filter">
<form action='#'>
<fieldset>
<legend>
<label>
<input type="checkbox" value="all" checked>
<span>Select All in Filter 2</span>
</label>
</legend>
<p>
<label>
<input type="checkbox" name="filter" value="v1" checked>
<span>F2: Value1</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v2" checked>
<span>F2: Value2</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v3" checked>
<span>F2: Value3</span>
</label>
</p>
<p>
<label>
<input type="checkbox" name="filter" value="v4" checked>
<span>F2: Value4</span>
</label>
</p>
</fieldset>
<input type="submit" value="Apply">
</form>
</div>
`
{
$('.filter').on('change', '[value="all"]', function () {
var $form,
$checkboxes,
$all;
$form = $(this).closest('form');
$checkboxes = $form.find('[name="filter"]');
$all = $form.find('[value="all"]');
$checkboxes.prop('checked', $all.prop('checked'));
}).on('change', '[name="filter"]', function () {
var $form,
$checkboxes,
$all,
checkedCount;
$form = $(this).closest('form');
$checkboxes = $form.find('[name="filter"]');
$all = $form.find('[value="all"]');
checkedCount = $checkboxes.filter(':checked').length;
if (!checkedCount) {
// no checkboxes checked
$all.prop({
checked: false,
indeterminate: false
});
} else if (checkedCount === $checkboxes.length) {
// all checkboxes checked
$all.prop({
checked: true,
indeterminate: false
});
} else {
// some checkboxes checked and unchecked
$all.prop({
indeterminate: true
});
}
});
}
html`
<div id="filter1">
<form action='#'>
<input type="checkbox" value="all" class="select-all" checked>(All)<br>
<input type="checkbox" value="v1" class="checkboxlistitem" checked>F1: Value1<br>
<input type="checkbox" value="v2" class="checkboxlistitem" checked>F1: Value2<br>
<input type="checkbox" value="v3" class="checkboxlistitem" checked>F1: Value3<br>
<input type="checkbox" value="v4" class="checkboxlistitem" checked>F1: Value4<br>
<input type="submit" value="Apply">
</form>
</div>
<br>
<div id="filter2">
<form action='#'>
<input type="checkbox" value="all" class="select-all" checked>(All)<br>
<input type="checkbox" value="v1" class="checkboxlistitem" checked>F2: Value1<br>
<input type="checkbox" value="v2" class="checkboxlistitem" checked>F2: Value2<br>
<input type="checkbox" value="v3" class="checkboxlistitem" checked>F2: Value3<br>
<input type="checkbox" value="v4" class="checkboxlistitem" checked>F2: Value4<br>
<input type="submit" value="Apply">
</form>
</div>
`
$(".select-all").change(function () {
$(this).siblings().prop('checked', $(this).prop("checked"));
});
$(".checkboxlistitem").change(function() {
var checkboxes = $(this).parent().find('.checkboxlistitem');
var checkedboxes = checkboxes.filter(':checked');
if(checkboxes.length === checkedboxes.length) {
$(this).parent().find('.select-all').prop('checked', true);
} else {
$(this).parent().find('.select-all').prop('checked', false);
}
});
$ = require ('jquery')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
