Develop Reference

Hide an pre-rendered li label

I've rendered an Django form field with CheckboxSelectMultiple widget in my page, now, on page load, I want to hide all unchecked checkbox option. I manage to hide the checkbox but I don't know how to hide the label associated with the checkbox. my question is, how can I hide this label as well? below is my code :
model.py
class model_A(models.Model):
user = models.ManyToManyField(User, blank=True)
form.py :
class EditForm(forms.ModelForm):
prefix = 'edit_form'
class Meta:
model = model_A
fields = '__all__'
widgets = {'user':forms.CheckboxSelectMultiple}
html :
<div class="field">
{{form.user}}
</div>
javascript :
$('input[type=checkbox]:not(:checked)').hide();
On view page source in browser :
<ul id="id_settings-user">
<li><label for="id_settings-user_1"><input type="checkbox" name="settings-user" value="1" id="id_settings-user_1" style="display: none;">
Person A</label>
</li>
<li><label for="id_settings-user_2"><input type="checkbox" name="settings-user" value="2" id="id_settings-user_2" style="display: none;">
Person B</label>
</li>
<li><label for="id_settings-user_3"><input type="checkbox" name="settings-user" value="3" id="id_settings-user_3" style="display: none;">
Person C</label>
</li>
</ul>

You can use .parent()/.closest() to target label then hide.
$('input[type=checkbox]:not(:checked)').parent().hide();
$('input[type=checkbox]:not(:checked)').closest('label').hide();
$('input[type=checkbox]:not(:checked)').parent().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="id_settings-user">
<li><label for="id_settings-user_1"><input type="checkbox" name="settings-user" value="1" id="id_settings-user_1" checked >
Person A</label>
</li>
<li><label for="id_settings-user_2"><input type="checkbox" name="settings-user" value="2" id="id_settings-user_2" >
Person B</label>
</li>
<li><label for="id_settings-user_3"><input type="checkbox" name="settings-user" value="3" id="id_settings-user_3">
Person C</label>
</li>
</ul>

Exclude disabled checkboxes when using Select All

I have checkboxes with labels in table. I have added one checkbox outside the table "Select All" with id "chkbox". Now the below code is working fine. It is
Selecting and Deselecting all the checkboxes in the table. Now there are some pages where some checkboxes are disabled due to business logic. I want these checkboxes should not be affected.
<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
s('#chkbox').change(function() {
var all = s('table').find('input[type="checkbox"]');
if (this.checked) {
all.prop('checked', true);
} else {
all.prop('checked', false);
}
});
});
</script>

Use :not() with :disabled selector.
var all = $('table').find('input[type="checkbox"]:not(:disabled)');
^^^^^^^^^^^^^^^^
This will not select the disabled checkboxes
$('#selectAll').change(function() {
$(':checkbox:not(:disabled)').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" />Select All
<ul>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
</ul>
You can also use :enabled selector.
$('table').find('input[type="checkbox"]:enabled')
$('#selectAll').change(function() {
$(':checkbox:enabled').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" /> Select All
<ul>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
</ul>
Note that: :enabled == :not(:disabled)

Check/Uncheck All CheckboxFor in MVC

As continuation of my previous question dealing with checkboxes in MVC. I've been doing just like this from this question but it seems that it's not working because of the hidden field created by the CheckBoxFor of MVC. Any idea why? Here's my fiddle showing the actual html
My actual html from CheckboxFor:
<form role="form">
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
<label for="1"><b>Faa</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="2">Faa1</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="3" name="[1].IsSelected" type="checkbox" value="true"><input name="[1].IsSelected" type="hidden" value="false">
<label for="3"><b>Fee</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="4" name="[1].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="4">Fee1</label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="5" name="[1].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[1].IsSelected" type="hidden" value="false">
<label for="5">Fee2</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="6" name="[2].IsSelected" type="checkbox" value="true"><input name="[2].IsSelected" type="hidden" value="false">
<label for="6"><b>Fii</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="7" name="[2].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="7">Fii1</label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="8" name="[2].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[1].IsSelected" type="hidden" value="false">
<label for="8">Fii2</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="9" name="[3].IsSelected" type="checkbox" value="true"><input name="[3].IsSelected" type="hidden" value="false">
<label for="9"><b>Foo</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="10" name="[3].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[3].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="10">Foo1</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="11" name="[4].IsSelected" type="checkbox" value="true"><input name="[4].IsSelected" type="hidden" value="false">
<label for="11"><b>Fuu</b></label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="12" name="[5].IsSelected" type="checkbox" value="true"><input name="[5].IsSelected" type="hidden" value="false">
<label for="12"><b>Bee</b></label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="13" name="[6].IsSelected" type="checkbox" value="true"><input name="[6].IsSelected" type="hidden" value="false">
<label for="13"><b>Bii</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="14" name="[6].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[6].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="14">Bii1</label>
</li>
</ul>
</form>
I'm trying to check the header and all the child checkboxes will be checked and if all the child checkboxes are being check, the parent checkbox will be checked and vice versa.
The js I'm trying to work on:
$('li :checkbox').on('click', function () {
var $chk = $(this),
$li = $chk.closest('li'),
$ul, $parent;
if ($li.has('ul')) {
$li.find(':checkbox').not(this).prop('checked', this.checked)
}
do {
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if ($chk.is(':checked')) {
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$li = $chk.closest('li');
} while ($ul.is(':not(.someclass)'));
});
UPDATE:
I made it working with the help of the answers below. Here's the working answer in fiddle. I did follow the suggestions by putting the flag whether the checkbox is parent or not. For safety, I also added child-li class so that I'll not use the bootstrap col-xs-offset-1, that might change anytime. Thank you very much!

First, (as pointed out in the comments), it's much easier if you indicate somewhere which is a parent and which is a child checkbox. In the provided code, this can sort of be implied by as it looks like the child lis have class 'col-xs-offset-1' - but this is a layout class so should not be used for semantic meaning as the layout may change.
So, with the current html, you can determine if a checkbox is the parent or not by doing:
var isparent = !$(this).closest("li").is(".col-xs-offset-1");
As stated above, we recommend not doing this - just working with what's been given. Instead you should add classes (in the example below 'parentCheckbox' and 'childCheckbox' have been added)
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input class='parentCheckbox' id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
<label for="1"><b>Faa</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input class='childCheckbox' id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="2">Faa1</label>
</li>
</ul>
then use:
var isparent = $(this).is(".parentCheckbox");
(of course, you only need to add a class to the parents, but it makes it easier later to explicitly state parent/child and you could add them to the li if that makes more sense when building with MVC/Razor).
Then handle parent and child checkboxes in separate routines.
When the parent is ticked, update all checkboxes except the parent to match the parent:
var checked = chk.is(":checked");
chk.closest("ul")
.find(":checkbox")
.not(chk)
.prop('checked', checked);
When a child is ticked, check if all the child checkboxes are ticked and update the parent:
var parent = chk.closest("ul")
.find("li:not(.col-xs-offset-1)")
.find(":checkbox");
var children = chk.closest("ul")
.find("li.col-xs-offset-1")
.find(":checkbox");
if (children.filter(":checked").length == children.length)
parent.prop("checked", true);
else
parent.prop("checked", false);
Here's the above added to your html jsfiddle: http://jsfiddle.net/3xczqogy/6/
Finally, laying out html to indicate parent/child is not how html works - it might help you work out what's going on, but there are better ways to do this. (In the question code, the "child" (actually sibling) lis are indented with spaces and no other tag/node).

This works with multiple levels of nesting:
$(document).ready(function(){
$('input[type=checkbox]').on('click', function () {
var currentName = $(this).attr("name")
var parrentVal = $(this).is(":checked");
var childrenPrefix = currentName.substring( 0, currentName.lastIndexOf( "IsSelected" ) );
var childrenInputs = $('input[type=checkbox][name^="'+childrenPrefix+'"]')
childrenInputs.each(function(){
$(this).prop("checked", parrentVal);
})
var suffixIndex = currentName.lastIndexOf('.SubsCategories');
if(suffixIndex > -1)
{
var parntName = currentName.substring( 0, suffixIndex);
var siblingsAndChildren = $('input[type=checkbox][name^="'+parntName+'.SubsCategories"]')
if(siblingsAndChildren.length > 0)
{
var selectedSiblingsAndChildren = $(siblingsAndChildren).filter( ":checked" );
$('input[type=checkbox][name="'+parntName+'.IsSelected"]').prop("checked", selectedSiblingsAndChildren.length === siblingsAndChildren.length);
}
}
})
})
Working fiddle

jquery check and uncheck all with action

I have more checkbox input that call function "boxclick" when the user click on this:
<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">
For check/uncheck all i use simple jquery script:
<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">
My problem is when i check/uncheck all the function "boxclick" not run.
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}

I think you can do:
HTML
<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">
jQuery
If you want to check/uncheck all checkbox:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', this.checked);
});
If you want to make select any one at a time:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', false);
this.checked = !this.checked;
});​
DEMO

Setting attribute of checkboxes to checked does not automatically fake a click event for you! Because you put those boxclick function calls within some "onclick" handlers, you must trigger a fake click event in order for your javascript to think that it clicked all the boxes. To trigger fake click event use $('#whatever').trigger('click'), for instance:
$('input[name*=\'selected\']').trigger('click');
If you want check/uncheck all functionality, you must say "ok, master checkbox, please listen for whenever I am checked or unchecked. When that happens, please set checked attribute of my slave boxes (your other boxes on the page) to match the master's current checked attribute." Like this:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=\'selected\']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);

I guess
$('input[name*=\'selected\']').attr('checked',
this.checked).trigger('click');
should do the trick here

Demo
http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>

Jquery check box filter

I am attemting to filter list items depending on whether certain checkboxes are checked or not.
I have managed to get the filtering to work but I am struggling to remove all list items on page load.
The idea is for 'list items' not to display untill the 'options' checkboxes are ckecked
I have placed my working version online here http://dev.perfectdaycanada.com/filter/
Thank you in advanced to anyone who can help me, it's much appreciated.
The javascript for filtering:
$(document).ready(function(){
$("input.type_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('type_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('type_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
$("input.start_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('start_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('start_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
});
HTML:
<div>
<input name="action-areas[]" type="checkbox" id="areas_crop_initiatives" value="0" class="type_check" checked="checked" />
<label for="areas_crop_initiatives">Crop initiatives</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_managment" value="1" class="type_check" checked="checked" />
<label for="areas_managment">Management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_assurance" value="2" class="type_check" checked="checked" />
<label for="areas_assurance">Assurance/certification</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_environmental" value="3" class="type_check" checked="checked" />
<label for="areas_environmental">Environmental management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_biodiversity" value="4" class="type_check" checked="checked" />
<label for="areas_biodiversity">Biodiversity</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_staff" value="5" class="type_check" checked="checked" />
<label for="areas_staff">Staff</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_community" value="6" class="type_check" checked="checked" />
<label for="areas_community">Community</label>
</div>
<ul id="case-studies">
<li id="event_1768" class="ethics_agrochemical_usage ethics_input_costs farms_potatoes areas_crop_initiatives">– Potatoes, Poland</li>
<li id="event_2190" class="ethics_hcvl farms_beef areas_community areas_managment countries_austria">– Beef, Ireland</li>
<li id="event_2191" class="ethics_air_emissions farms_tomatoes areas_assurance countries_austria">– Tomatoes, Portugal</li>
</ul>

Just add the class type_hidden to your list items like this:
<li id="event_1768" class="other classes type_hidden">– Potatoes, Poland</li>
(and than for all list items of course)