How to get the selected node items from jQuery checkbox tree - javascript

I am using jQuery to generate the checkbox tree, I am not able to get the checked node from tree list. Please help me on this.
Here is my code:-
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('#tabs').tabs({
cookie: { expires: 30 }
});
$('.jquery').each(function() {
eval($(this).html());
});
$('.button').button();
});
//-->
</script>
jQuery checkboxTree plugin demo
Project Home
<code class="jquery" lang="text/javascript">
$('#tree1').checkboxTree({
initializeUnchecked: 'collapsed',
collapse: function(){
alert('collapse event triggered (passed as option)');
},
expand: function(){
alert('expand event triggered (passed as option)');
},
check: function(n){
alert('Hi there!!!'+n);
},
uncheck: function(n){
alert('Hi there!!!'+n);
}
});
</code>
<ul id="tree1">
<li><input type="checkbox"><label>Node 1</label>
<ul>
<li><input type="checkbox"><label>Node 1.1</label>
<ul>
<li><input type="checkbox"><label>Node 1.1.1</label>
</ul>
</ul>
<ul>
<li><input type="checkbox"><label>Node 1.2</label>
<ul>
<li><input type="checkbox"><label>Node 1.2.1</label>
<li><input type="checkbox"><label>Node 1.2.2</label>
<li><input type="checkbox"><label>Node 1.2.3</label>
<ul>
<li><input type="checkbox"><label>Node 1.2.3.1</label>
<li><input type="checkbox"><label>Node 1.2.3.2</label>
</ul>
<li><input type="checkbox"><label>Node 1.2.4</label>
<li><input type="checkbox"><label>Node 1.2.5</label>
<li><input type="checkbox"><label>Node 1.2.6</label>
</ul>
</ul>
<li><input type="checkbox"><label>Node 2</label>
<ul>
<li><input type="checkbox"><label>Node 2.1</label>
<ul>
<li><input type="checkbox"><label>Node 2.1.1</label>
</ul>
<li><input type="checkbox"><label>Node 2.2</label>
<ul>
<li><input type="checkbox"><label>Node 2.2.1</label>
<li><input type="checkbox"><label>Node 2.2.2</label>
<li><input type="checkbox"><label>Node 2.2.3</label>
<ul>
<li><input type="checkbox"><label>Node 2.2.3.1</label>
<li><input type="checkbox"><label>Node 2.2.3.2</label>
</ul>
<li><input type="checkbox"><label>Node 2.2.4</label>
<li><input type="checkbox"><label>Node 2.2.5</label>
<li><input type="checkbox"><label>Node 2.2.6</label>
</ul>
</ul>
</ul>
Please do help me on this.


You should just be able to use the :checked selector. The following should return any checked checkboxes in the tree1 element.
var checkedCheckboxes = $('#tree1 input[type="checkbox"]:checked');

Related

How to toggle hide and show child elements in tree layout?

Here is my html code which requires some update like span or something which can let it hide all child elements to display children on click only for individual parent.
how can I add toggle span and javascript to make it show on click only specific child of each parent not all of them at once.
i am too beginner with javascript so no idea how can this be done please help me out how can i resolve this issue it will save my life. Thanks a lot
<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
<li class="has">
<input type="checkbox" name="Dashboard" value="yes"> Dashboard
<ul> </ul>
</li>
</ul>
<ul id="Div2" class="tree">
<li class="has" "="">
<input type="checkbox" name="Master" value="yes"> Master
<ul>
<li>
<input type="checkbox" id="Upper1 name=" menus-accesscontrol[9]"="" value="9"> AccessControl
<ul id="Parent1">
<li>
<input type="checkbox" name="Menus-User[3]" value="3"> User
<ul class="childs">
<li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Menu[6]" value="6"> Menu
<ul class="childs">
<li><input type="checkbox" name="MenuAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MenuAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MenuAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MenuAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Group[23]" value="23"> Group
<ul class="childs">
<li><input type="checkbox" name="GroupAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="GroupAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="GroupAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="GroupAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerMaster[2]" value="2"> CustomerMaster
<ul class="childs">
<li><input type="checkbox" name="CustomerMasterAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerMasterAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerMasterAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerMasterAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul id="Div3" class="tree">
<li class="has" "="">
<input type="checkbox" name="Inventory" value="yes"> Inventory
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-UserRecharge[8]" value="8"> UserRecharge
<ul class="childs">
<li><input type="checkbox" name="UserRechargeAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserRechargeAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="UserRechargeAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="UserRechargeAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-SupplierInventory[43]" value="43"> SupplierInventory
<ul class="childs">
<li><input type="checkbox" name="SupplierInventoryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierInventoryAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="SupplierInventoryAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="SupplierInventoryAllowView" value="0"> Allow View</li>
</ul>
<li>
<input type="checkbox" id="Upper2 name=" menus-report[30]"="" value="30"> Report
<ul id="Parent2">
<li>
<input type="checkbox" name="Menus-CustomerException[31]" value="31"> CustomerException
<ul class="childs">
<li><input type="checkbox" name="CustomerExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="CustomerExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="CustomerExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SuplierException[33]" value="33"> SuplierException
<ul class="childs">
<li><input type="checkbox" name="SuplierExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SuplierExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SuplierExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SuplierExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SupplierReport[34]" value="34"> SupplierReport
<ul class="childs">
<li><input type="checkbox" name="SupplierReportAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierReportAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SupplierReportAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SupplierReportAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SenderSupplierSummary[35]" value="35"> SenderSupplierSummary
<ul class="childs">
<li><input type="checkbox" name="SenderSupplierSummaryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-MonthlySale[39]" value="39"> MonthlySale
<ul class="childs">
<li><input type="checkbox" name="MonthlySaleAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MonthlySaleAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MonthlySaleAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MonthlySaleAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
</li>
</li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
</ul>
</li>
</ul>
<ul id="Div4" class="tree">
<li class="has" "="">
<input type="checkbox" name="Invoice" value="yes"> Invoice
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerInvoice[44]" value="44"> CustomerInvoice
<ul class="childs">
<li><input type="checkbox" name="CustomerInvoiceAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerInvoiceAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerInvoiceAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerInvoiceAllowView" value="0"> Allow View</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="Div5" class="tree">
<li class="has" "="">
<input type="checkbox" name="Contract Management" value="yes"> Contract Management
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Configuration[45]" value="45"> Configuration
<ul class="childs">
<li><input type="checkbox" name="ConfigurationAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ConfigurationAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ConfigurationAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ConfigurationAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Contract[47]" value="47"> Contract
<ul class="childs">
<li><input type="checkbox" name="ContractAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ContractAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ContractAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ContractAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>

You can use the 'toggleClass' in jQuery though there are other ways base on your needs. But you can check this basic example so that you can have an idea.
$(".root").on("click", function(){
$(this).find("ul").toggleClass("hide-children");
})
Sample 1 Fiddle: https://jsfiddle.net/nq5ecbLu/1/
Sample 2 Fiddle: https://jsfiddle.net/mt10aeg7/

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>

Using JS DOM, I want to get all input tags with the same name

Hey guys I have this simple form and just need to know how to call for all the input tags with the name 'checks'.
<form>
<ul>
<li><input type="checkbox" name="checks"/> A</li>
<li><input type="checkbox" name="checks"/> B</li>
<li><input type="checkbox" name="checks"/> C</li>
<li><input type="checkbox" name="checks"/> D</li>
</ul>
</form>
so far the JS i have is:
function myFunc() {
return document.getElementsByTagName('input').name;
}

You could use .querySelectorAll() and an attribute selector:
document.querySelectorAll('input[name="checks"]');
You could also use a .forEach loop to iterate over them:
var checkboxes = document.querySelectorAll('input[name="checks"]');
Array.prototype.forEach.call(checkboxes, function (el) {
console.log(el.name);
});
Of course you could also use .getElementsByName():
document.getElementsByName('checks');

See:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
console.log( document.querySelectorAll('input[name=checks]') )
<form>
<ul>
<li><input type="checkbox" name="checks"/> A</li>
<li><input type="checkbox" name="checks"/> B</li>
<li><input type="checkbox" name="checks"/> C</li>
<li><input type="checkbox" name="checks"/> D</li>
</ul>
</form>

Use the Document.getElementsByName():
var inputs = document.getElementsByName("checks");
And you'll get a NodeList object containing all these inputs.

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