Develop Reference

Checkbox check all is not working correctly

I have a form field where I have two fields one containing countries and other containing memberships and both have check boxes. The problem is that with the code I am using to Select All the countries (check/uncheck all the check boxes for countries) also checks or unchecks the memberships field. I want to differentiate between the two so that I only check countries and not the check boxes in the membership field.
Here is the code I am using:
$("#checkCountries").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
EDIT: HTML PART
<tr>
<th>Target Memberships</th>
<td>
<div class="target-memberships col-sm-8">
<input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
<input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
<input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
</div>
</td>
</tr>
<tr>
<th>Target Countries</th>
<td>
<input type="checkbox" id="checkCountries" checked> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
<input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
<input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
<input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
<input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
<input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
</div>
</td>
</tr>
Here, input:checkbox is making the code to work on all the checkboxes in the page. I think I need to change this to make it work specifically for that particular field (countries) only. Please help.

If your HTML is like this:
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
In HTML, each id must be unique. The name can be the same as you have to define the array: country[], but the id must be unique to each element. Since input has no closing tag, it is best to add that to the end of the tag, <input type="checkbox" /> for example.
You can use this:
$("#checkCountries").click(function(){
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
This targets the Class selector target-countries and the input elements within that are of a type checkbox. It will then set the property checked to match the value of the current checkbox.
Working Snippet:
$(function() {
$("#checkCountries").click(function() {
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
});
.target-countries {
margin: 3px;
border: 1px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
Hope that helps.

Refresh checkboxes javascript

I have a problem with checkboxes:
I have 2 menu that open 2 type of checkbox and I would like to have one all checked and the other not-checked when I refresh the page. this is the code:
<div id="Scena" class="tabcontent" onmousedown="if (event.preventDefault) event.preventDefault()">
<input type="checkbox" checked="checked" style="cursor:hand;" onclick="presenter.toggleInstanceVisibilityByName('Parete_frontale',true);"> Parete_frontale </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_destra', true);"> Parete_destra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_sinistra', true);"> Parete_sinistra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_p1', true);presenter.toggleInstanceVisibilityByName('Parete_p2', true);presenter.toggleInstanceVisibilityByName('Parete_p3', true);"> Parete_porta </input><br/>
</div>
<div id="Indagini" class="tabcontent">
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_p2','back01_cervo.png');setInfoSofia(4);"> Image enhancement </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_destra', 'destra_fluo.png');setInfoSofia(5);"> Analisi di Fluorescenza (LIF) </input>
<input type="checkbox" style="cursor:hand;" onclick="setInfoSofia(6)"> Efflorescenze saline </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.toggleSpotVisibility(HOP_ALL, true); presenter.enableOnHover(!presenter.isOnHoverEnabled()); hotspotSwitch();"> Indagini di caratterizzazione dei materiali </input>
</div>
I want all children of the div with id Scena to be checked and those of the div with id Indagini to be unchecked.
Can anyone help me?

You can use "checked" option.So, by default all the Scena checkboxes will be checked.
<input type="checkbox" checkedstyle="cursor:hand;" onclick="" checked> Image enhancement

using checkboxes for multiple instances

I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.

remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});

Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>

JavaScript (jQuery) disable checkbox issue

Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...
What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four).
My JavaScript:
<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});
The first Div:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr>
</table>
</div>
My CSS, if needed:
<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>
The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.
What works:
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>

.index() returns the index relative to the sibling elements. In your working example the siblings of an <input> are the other inputs. In your non-working example the only sibling is the <label> element.
In your "odd" example all inputs are siblings again.
In order to make it work anyway you can use .index(element):
$inputs.index($this)
This returns the index of the input $this within the jquery input collection $inputs. Working fiddle.

I would change the ID's on your input fields, ID's can't start with a number
<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
may cause problems with your JS. I would try something like
<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />

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)