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>
Related
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));
});
I have the following code, mostly from How can I select all checkboxes from a form using pure JavaScript and it's just not working.
Test.html
<html>
<head>
<script>
function select(){
var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<form id="myId" name="myForm">
<input type="checkbox" value="1"/> 1
<input type="checkbox" value="2"/> 2
<input type="checkbox" value="3"/> 3
<input type="button" onclick="select()" value="Select all"/>
</form>
</body>
</html>
Clicking the button does nothing.
I must be doing something really wrong here but I just can't pick it out.
Try this...
<html>
<head>
<script>
function test(){
var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<form id="myId" name="myForm">
<input type="checkbox" value="1"/> 1
<input type="checkbox" value="2"/> 2
<input type="checkbox" value="3"/> 3
<input type="button" onclick="test()" value="Select all"/>
</form>
</body>
</html>
Try any other name for function select, rest your code is fine.
select is a native method defined on HTMLInputElement to focus selected input element.
select
Solution1: Change the name of your function.
Solution2: Try onclick="window.select()" insted of onclick="select()"
i suggest you To use Jquery and do like so :
Live Demo
HTML
<ul class="chk-container">
<li><button id="selecctall">select all</button>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>
Jquery
$(document).ready(function() {
$('#selecctall').mouseup(function(event) { //on click
if(document.activeElement.tagName ==='BUTTON') { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
Simpler and more efficient way
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.
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.
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');