Develop Reference

Find image inside a checkbox using jquery find()

I want to change the src attribute of images inside checkboxes based on if they are checked or not. The checking if checked works but the .attr("src") is always undefined.
How do i get the img inside the checkbox ?
cboxes.each(function() {
cb = $(this);
cbImg = cb.find("img");
if (cb.is(':checked')) {
alert(cbImg.attr("src")); //returns undefined
cbImg.attr("src", "css/img/checkbox_fylld.png");
} else {
cbImg.attr("src", "css/img/checkbox_ofylld.png");
}
});
And the HTML
<ul class="nav-justified">
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />0-2år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />2-10 år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />10+ år</label>
</li>
</ul>

$(document).ready(function(){
$('.ageSelect').each(function() {
cb = $(this);
cbImg = cb.next("img");
if (cb.attr('selected')) {
alert(cbImg.attr("src"));//returns undefined
cbImg.attr("src", "css/img/checkbox_fylld.png");
} else {
cbImg.attr("src", "css/img/checkbox_ofylld.png");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="nav-justified">
<li><label><input class="ageSelect" type="radio" selected id="timeSpan" name="timeSpan" value="0"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />0-2år </label></li>
<li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />2-10 år</label></li>
<li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10"><img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />10+ år</label></li>
</ul>
You do not have any checkboxes. They are radio buttons.
However, here is the code:

Problem is your images are not inside your checkboxes. Checkbox inputs are self-closing tags (also you should terminate them with />).
Instead of .find("img") use .next("img").
One last important thing : you need to wrap your image handling inside an event listener:
$("input[name=\"timeSpan\"").on("change", function() {...});
so the code is executed every time a change is made to the radio input.
$("input[name=\"timeSpan\"").on("change", function() {
$("input[name=\"timeSpan\"").each(function() {
var cbImg = $(this).next("img");
if ($(this).is(':checked')) cbImg.attr("src", "http://www.clker.com/cliparts/8/8/c/0/1197121244407718078webmichl_powerbutton_2_states_%28_on_off_%29_1.svg.med.png");
else cbImg.attr("src", "https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg");
});
});
.ageSelectImg {
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-justified">
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />0-2år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />2-10 år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />10+ år</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)

Checkbox select using querySelectorAll is not working

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

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)