JQuery Passing Each Sibling to a Function - javascript

I'm having trouble with the .siblings().each() in JQuery. I have a nested list of checkboxes. One functionality is that you check a checkbox and it also checks all of the corresponding checkboxes having the same value. That works. Then, if you check a parent checkbox then all of the children (siblings) will be selected. That also works.
What I'm having trouble with is checking a parent checkbox and then calling a function on each child (sibling) to check other checkboxes of the same value. Basically passing each sibling to the checkAllSameUser function.
Here's the HTML:
<ul>
<li><input type='checkbox' class="build-checkbox" value="1" /> 1</li>
<li><input type='checkbox' class="build-checkbox" value="2" /> 2
<ul>
<li><input type='checkbox' class="build-checkbox" value="3" /> 3</li>
</ul>
</li>
<li><input type='checkbox' class="build-checkbox" value="4" /> 4
<ul>
<li><input type='checkbox' class="build-checkbox" value="3" /> 3</li>
<li><input type='checkbox' class="build-checkbox" value="5" /> 5</li>
</ul>
</li>
<li><input type='checkbox' class="build-checkbox" value="6" /> 6
<ul>
<li><input type='checkbox' class="build-checkbox" value="5" /> 5</li>
<li><input type='checkbox' class="build-checkbox" value="7" /> 7</li>
</ul>
</li>
JQuery:
$(".build-checkbox").change(function () {
checkAllSameUser($(this));
});
function checkAllSameUser(user) {
var val = user.val();
if ($(user).is(":checked")) {
$(":checkbox[value='" + val + "']").prop("checked", true);
}
else {
$(":checkbox[value='" + val + "']").prop("checked", false);
}
};
$(function () {
$("input[type='checkbox']").change(function () {
$(this).siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
$(this).siblings('ul').each(function () {
checkAllSameUser($(this).find('input[type=checkbox]'));
});
});
});
JSFiddle: http://jsfiddle.net/mU3FV/376/
Basically, if you hit check the '4' checkbox, then all of the '3' and '5' checkboxes on the page will also be checked (following the same logic of hitting the '3' or '5' individually). "I'm going to check each child and each matching value of each child on the page" essentially.
I'm fairly certain I'm not understanding the .each function or passing each sibling objects properly. I'd appreciate any input... JQuery and Javascript are not my strong points.


Are you looking for a logic as this?
$(".build-checkbox").change(function() {
checkAllSameUser($(this));
});
function checkAllSameUser(user) {
var val = user.val();
if ($(user).is(":checked")) {
$(":checkbox[value='" + val + "']").prop("checked", true);
} else {
$(":checkbox[value='" + val + "']").prop("checked", false);
}
};
$(function() {
$("input[type='checkbox']").change(function() {
var val = $(this).val();
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
$(this).siblings('ul').find("input[type='checkbox']").each(function() {
checkAllSameUser($(this));
});
});
});
li ul {
padding-left: 25px;
border: none;
display: block;
}
ul {
border: 2px solid blue;
padding: 5px;
margin: 5px;
display: inline-block;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type='checkbox' class="build-checkbox" value="1" /> 1</li>
<li>
<input type='checkbox' class="build-checkbox" value="2" /> 2
<ul>
<li>
<input type='checkbox' class="build-checkbox" value="3" /> 3</li>
</ul>
</li>
<li>
<input type='checkbox' class="build-checkbox" value="4" /> 4
<ul>
<li>
<input type='checkbox' class="build-checkbox" value="3" /> 3</li>
<li>
<input type='checkbox' class="build-checkbox" value="5" /> 5</li>
</ul>
</li>
<li>
<input type='checkbox' class="build-checkbox" value="6" /> 6
<ul>
<li>
<input type='checkbox' class="build-checkbox" value="5" /> 5</li>
<li>
<input type='checkbox' class="build-checkbox" value="7" /> 7</li>
</ul>
</li>
</ul>
Note the
$(this).siblings('ul').find("input[type='checkbox']").each(function() {
checkAllSameUser($(this));
});
instead of
$(this).siblings('ul').each(function () {
checkAllSameUser($(this));
});

Related

Multiple checkbox with button

How to select topics the user likes before it proceeds using checkboxes. I want the next button to be enabled only after a checkbox is selected.
HTML
<input type="submit" value="Next" id="next" disabled="disabled">
<ul>
<li>
<input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked"/>
<label for="chkPlant1"><img src="img/plant1.jpg" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant2" />
<label for="chkPlant2"><img src="img/plant2.jpg" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant3" />
<label for="chkPlant3"><img src="img/plant3.png" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant4" />
<label for="chkPlant4"><img src="img/plant4.jpg" /></label>
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#chkPlant1").change(function () {
if($('#chkPlant1').is(':checked')) {
$("#next").prop("disabled", false);
}
else {
$("#next").prop("disabled", true);
}
});
});
</script>

Target any input with class input.checkbox and not just the first one and check inside if any of them is checked, this will make sure at least one is picked.
$("input.checkbox").change(function() {
if ($("input.checkbox").is(':checked')) {
$(function() {
$("input.checkbox").change(function() {
if ($("input.checkbox").is(':checked')) {
$("#next").prop("disabled", false);
} else {
$("#next").prop("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Next" id="next" disabled="disabled">
<ul>
<li>
<input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked" />
<label for="chkPlant1"><img src="img/plant1.jpg" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant2" />
<label for="chkPlant2"><img src="img/plant2.jpg" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant3" />
<label for="chkPlant3"><img src="img/plant3.png" /></label>
</li>
<li>
<input class="checkbox" type="checkbox" id="chkPlant4" />
<label for="chkPlant4"><img src="img/plant4.jpg" /></label>
</li>
</ul>

Use :checked pseudo-selector with length property as it shown below:
$(function() {
function updateView() {
// count of all checked inputs with class .checkbox
if ($("input.checkbox:checked").length > 0) {
$("#next").prop("disabled", false);
} else {
$("#next").prop("disabled", true);
}
}
// match all inputs with class .checkbox
$("input.checkbox").change(function(event) {
updateView();
});
// initialize
updateView();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="submit" value="Next" id="next">
<ul>
<li><input class="checkbox" type="checkbox" id="chkPlant1" /></li>
<li><input class="checkbox" type="checkbox" id="chkPlant2" /></li>
<li><input class="checkbox" type="checkbox" id="chkPlant3" /></li>
<li><input class="checkbox" type="checkbox" id="chkPlant4" /></li>
</ul>

I hope this could help, if you don't want to use the class
<script type="text/javascript">
$(function () {
$("#chkPlant1").change(function () {
if($('#chkPlant1').is(':checked')) {
$("#next").prop("disabled", false);
}
else {
$("#next").prop("disabled", true);
}
});
$("#chkPlant2").change(function () {
if($('#chkPlant2').is(':checked')) {
$("#next").prop("disabled", false);
}
else {
$("#next").prop("disabled", true);
}
});
$...
});
</script>

How to get the count of checkboxes that checked inside a form tag and show the percentage in a progress bar?

I want to update the progress bar according to the count of checkboxes checked. it should keep updating when checkboxes checked and unchecked. it's better to identify the progress bar using it's id.
Here is my Html code
<ul>
<li><input type="checkbox" id="select_all"/> Selecct All</li>
<li><input class="checkbox" type="checkbox"> Item 1</li>
<li><input class="checkbox" type="checkbox"> Item 2</li>
<li><input class="checkbox" type="checkbox"> Item 3</li>
<li><input class="checkbox" type="checkbox"> Item 4</li>
<li><input class="checkbox" type="checkbox"> Item 5</li>
<li><input class="checkbox" type="checkbox"> Item 6</li>
</ul>
<div class="progress">
<span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</div>
Here is my javascript
$(document).ready(function () {
var count = 0;
var checked = 0;
function countboxes() {
count = $("input[type='checkbox']").length;
console.log(count);
}
countboxes();
$(":checkbox").click(countBoxes);
function countChecked() {
checked = $("input:checked").length;
var percentage = parseInt(((checked / count) * 100));
$(".CheckProgress").progress({
value: percentage
});
$("#CheckProgress").css("width", percentage + "%");
}
countChecked();
$(":checkbox").click(countChecked);
});

Firstly you've defined the function with a name of countboxes(), not countBoxes(), and JS is case-sensitive. Also there is no default progress() method in jQuery, nor is it in jQueryUI or Bootstrap. You don't need it either as all you do is set the width of the progress bar to the given percentage value.
To do this in the most simple way you simply need to use a change event handler and work out the percentage of checked boxes against the total. Then you can set the progress bar width to that. Try this:
$(document).ready(function() {
var $checkboxes = $('.checkbox');
var $progress = $('#CheckProgress');
var total = $checkboxes.length;
$checkboxes.on('change', function() {
var checked = $checkboxes.filter(':checked').length;
var progressWidth = (checked / total) * 100;
$('.progress-bar').css('width', progressWidth + '%');
});
});
.progress-bar { width: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<ul>
<li><input type="checkbox" id="select_all" /> Selecct All</li>
<li><input class="checkbox" type="checkbox"> Item 1</li>
<li><input class="checkbox" type="checkbox"> Item 2</li>
<li><input class="checkbox" type="checkbox"> Item 3</li>
<li><input class="checkbox" type="checkbox"> Item 4</li>
<li><input class="checkbox" type="checkbox"> Item 5</li>
<li><input class="checkbox" type="checkbox"> Item 6</li>
</ul>
<div class="progress">
<span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></span>
</div>

DO as below
Create function which change the progress whenever changes the checkbox, find all checkbox and checked checkbox and set progress after getting percentage.
$(document).ready(function () {
function progress(){
var checked = $('input:checkbox:checked:not("#select_all")').length;
var count = $('input:checkbox').length;
if( $('#select_all:checkbox:checked').length > 0 ){
checked = count;
}
if(checked == 0){
var result = 0;
} else {
var result = (checked * 100) / count;
}
$('.progress-bar').css('width', result+'%').attr('aria-valuenow', result);
}
progress();
$(document).on('change', 'input', function(e){
progress();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<ul>
<li><input type="checkbox" id="select_all"/> Selecct All</li>
<li><input class="checkbox" type="checkbox"> Item 1</li>
<li><input class="checkbox" type="checkbox"> Item 2</li>
<li><input class="checkbox" type="checkbox"> Item 3</li>
<li><input class="checkbox" type="checkbox"> Item 4</li>
<li><input class="checkbox" type="checkbox"> Item 5</li>
<li><input class="checkbox" type="checkbox"> Item 6</li>
</ul>
<div class="progress">
<span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</div>

Please see the below example for your solution.
jQuery('#btnTest').click(function(){
var i = 0;
var total_checkboxes = 0;
var percent_checked;
// Get all checkboxes with class name checkbox
total_checkboxes = jQuery('#checbox_holder input[type="checkbox"].checkbox').length;
//console.log(total_checkboxes);
// Now iterate over each checkbox inside #checbox_holder div
jQuery('#checbox_holder input[type="checkbox"]').each(function(){
//Check if we have checkbox with class name checkbox
if(jQuery(this).hasClass('checkbox')){
// CHeck if checkbox is checked or not
if(jQuery(this).prop("checked") == true){
// Increment no of checked checboxes;
i++;
}
}
});
// Calculate percentage of checked checkboxs
percent_checked = ( i / total_checkboxes ) * 100;
//console.log(percent_checked);
//console.log(i);
//Assign width to the progress bar
jQuery('#CheckProgress').css('width', percent_checked+'%');
});
.progress{
width: 100%;
border: 2px solid #ccc;
}
.progress-bar{
display: block;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="checbox_holder">
<ul>
<li><input type="checkbox" id="select_all"/> Selecct All</li>
<li><input class="checkbox" type="checkbox"> Item 1</li>
<li><input class="checkbox" type="checkbox"> Item 2</li>
<li><input class="checkbox" type="checkbox"> Item 3</li>
<li><input class="checkbox" type="checkbox"> Item 4</li>
<li><input class="checkbox" type="checkbox"> Item 5</li>
<li><input class="checkbox" type="checkbox"> Item 6</li>
</ul>
</div>
<div class="progress">
<span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</div>
<button id="btnTest"> Test </button>

Javascript generate recursive JSON object from nested UL LI check box

I have situation to generate JSON object as like below structure from nested UL LI checkbox when it is checked/uncheck.
<ul class="tree" id="tree">
<li><input type="checkbox" name="Team1" value="Team1" checked="checked">Team1 <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="Team1 child1" checked="checked">Team1 child1</li>
<li><input type="checkbox" name="two" value="Team1 child2">Team1 child2</li>
<li><input type="checkbox" name="three" value="Team1 child3" checked="checked">Team1 child3 <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="four" value="Team1 child3 - child1" checked="checked">Team1 child3 - child1</li>
<li><input type="checkbox" name="five" value="Team1 child3 - child2">Team1 child3 - child2</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="six" value="Team2">Team2</li>
<li><input type="checkbox" name="seven" value="Team3" checked="checked">Team3
<ul>
<li><input type="checkbox" name="eight" value="Team3 child1">Team3 child1</li>
<li><input type="checkbox" name="nine" value="Team3 child2" checked="checked">Team3 child2
<ul>
<li><input type="checkbox" name="ten" value="Team3 child2 - child1" checked="checked">Team3 child2 - child1</li>
<li><input type="checkbox" name="eleven" value="Team3 child2 - child2" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Structure should be like below,
{
"Team" : [
{
"name" : "Team1",
"child" : [
{
"name" : "Team1 child1",
},
{
"name" : "Team1 child3",
"child" :[
{
"name" : "Team1 child3- child1",
}
]
}
]
},
{
"name" : "Team3",
"child" : [
{
"name" : "Team3 child2",
"child" :[
{
"name" : "Team3 child2- child1",
},
{
"name" : "Team3 child2- child2",
}
]
}
]
}
]
}
Tried with solution which is completely mess. Please advise for better solution.

You can do it with recursion
function createJSON($ul) {
return $ul
.children() // get all children (li)
.filter(function() { // filter li which have checked checkbox
return $(this).children(':checkbox')[0].checked; // get children checkbox is checked
})
.map(function() { // now generate array using map()
var obj1 = {};
obj1.name = $.trim($(this).contents().filter(function() { // get text content and trim to avoid spaces
return this.nodeType === 3 && $.trim(this.textContent).length > 0 // check text node and empty string
}).text());
var $ulc = $(this).children('ul'); // get inner children
if ($ulc.length > 0) // if it have children , use recursion and do the same
obj1.child = createJSON($ulc); // recursion
return obj1;
}).get(); // get the result array
}
$(':checkbox').change(function() {
$('#res').html(JSON.stringify(createJSON($('#tree')), null, 3))
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="res"></pre>
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes" checked="checked">Team1
<!-- AND SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="one" value="one" checked="checked">Team1 child1</li>
<li>
<input type="checkbox" name="two" value="two">Team1 child2</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles">Team1 child3
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add" checked="checked">Team1 child3 - child1</li>
<li>
<input type="checkbox" name="user_role" value="delete">Team1 child3 - child2</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="rl_module" value="yes">Team2</li>
<li>
<input type="checkbox" name="rl_module" value="yes" checked="checked">Team3
<ul>
<li>
<input type="checkbox" name="vat" value="yes">Team3 child1</li>
<li>
<input type="checkbox" name="bank_account" value="yes">Team3 child2
<ul>
<li>
<input type="checkbox" name="view" value="yes" checked="checked">Team3 child2 - child1</li>
<li>
<input type="checkbox" name="crud" value="yes" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>

Groups of radio-buttons contains groups of checkboxes

I'm trying to make a list of radio buttons that contain a group of check boxes and these in turn contain another group checkboxes:
My code works fine when I use in one radio button. If I select another one JS is returned something strange, and I do not know how to fix it.
Here is my code:
HTML
<ul>
<li class="radio">
<input type="radio" name="level-1">submenu1.1
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.1.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1" value="submenu">submenu1.2
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.2.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1">submenu1.3
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.3.1
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.2
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.3
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.4
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$(document).ready(function() {
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function() {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']").click(function (event) {
$(this).next("ul").children("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
});
});
http://jsfiddle.net/benatespina/Et95z/

It is happening because you are triggering level-2 change event inside level-1 change event.
Write them separately.
Write:
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function () {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']:checked").removeAttr("checked");
});
$("input[type=checkbox][name='level-2']").change(function (event) {
$(this).next("ul").find("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
Updated fiddle here.

Background color on select checkbox [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
change background color of li using jquery
I'm trying to change background color of li on onselect 'checkbox'.
<ul>
<li><input type="checkbox" /> Link 1</li>
<li><input type="checkbox" /> Link 2</li>
<li><input type="checkbox" /> Link 3</li>
<li><input type="checkbox" /> Link 4</li>
</ul>
I Need to change the whole line background color when some one select checkbox.

HTML
<ul>
<li><input type="checkbox" /> <label> Link 1</label></li>
<li><input type="checkbox" /> <label> Link 2</label></li>
<li><input type="checkbox" /> <label> Link 3</label></li>
<li><input type="checkbox" /> <label> Link 4</label></li>
</ul>​
CSS
label{width:150px; display:inline-block}
input[type="checkbox"]:checked+label{background:blue; color:white}​
DEMO
For IE you can use a library like http://selectivizr.com/

Try this out i think it will work.
$('input[type=checkbox]').click(function(){
$('input[type=checkbox]').parent().css('background',''); //This turns all checkboxes background to default
$(this).parent().css('background','red');
});

Try this:
$('input[type=checkbox]').click(function(){
if(this.checked) {
$(this).parent().css('background','red');
} else {
$(this).parent().css('background','');
}
});

Try this:
http://jsfiddle.net/AHrrP/
HTML
<ul>
<li><input type="checkbox" /> Link 1</li>
<li><input type="checkbox" /> Link 2</li>
<li><input type="checkbox" /> Link 3</li>
<li><input type="checkbox" /> Link 4</li>
</ul>​
JS
$(function(){
$('input[type="checkbox"]').click(function(){
if(this.checked)
$(this).closest('li').addClass('blue');
else
$(this).closest('li').removeClass('blue');
});
});​
CSS
li {
padding:4px;
}
li.blue {
background-color: #08C;
}​

jQuery
$('input[type=checkbox]').click(function(){
$(this).parent().toggleClass('highlight');
});
CSS
.highlight{
background-color:blue;
}
I assume you would want the highlight to be gone when the checkbox is re-clicked. here's a working jsbin

$('li :checkbox').click(function(){
$(this).parent().css('background',$(this):is(":checked")?'blue':'');
});

Try this:
<ul id="myList">
<li><input type="checkbox" /> Link 1</li>
<li><input type="checkbox" /> Link 2</li>
<li><input type="checkbox" /> Link 3</li>
<li><input type="checkbox" /> Link 4</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('#myList input').each(function(){
console.log(this);
$(this).click(function(){
console.log(this);
if($(this).prop('checked')){
$(this).parent().css('background','#eee');
}
else{
$(this).parent().css('background','');
}
});
});
});
</script>

Categories

Resources