When I loop over all checkboxes with class .category attached and try to change the visual output of the checkbox to checked, nothing happens. Variable 'state' returns true or false and is used to change the element it's current visual output. At this very moment nothing happens and I don't know why.
HTML:
<input type="checkbox" class="category">checky 1</span>
<input type="checkbox" class="category">checky 2</span>
<input type="checkbox" class="category">checky 3</span>
JS:
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
var state = $(element).prop('checked');
$(element).prop('checked', state);
});
return false;
}
Thanks in advance.
Note that nothing happens because you're using return false in event handler. That will prevent (un)checking the checkbox.
If you're trying to implement Select All option, just do:
$(".category:first").on("click", function() {
$(".category").prop("checked", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="category"/> Select all</label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
Try this to set your checkboxes checked.
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
element.value='checked';
});
return false;
}
Try this code:
$('body').on('click','.category',click);
function click(){
$('.category').each(function(i,element){
var state = $(element).prop('checked');
$(element).prop('checked', state ? '' : 'checked');
});
return false;
}
If you perform a test over your code, you will see that the way you are trying to grab the elements is not correct. Class "category" does not exist. What you have is "category-desktop". SO if you test like this:
alert($( 'input' ).hasClass( "category" ));//False
alert($( 'input' ).hasClass( "category-desktop" ));//True
I think you are trying to do this:
$('body .category-desktop').on('click',function(){
alert("click ok");
//run your function
});
See fiddle http://jsfiddle.net/yruhL69v/4/
But to finish the code I need to understand if you want to click over any check box, or over any place on the body,or any element that has category-desktop indise body .
Related
I have this switcher (Checked):
<div class="switch try">
<label><input checked="" type="checkbox" class="checkit"><span class="lever switch-col-green"></span></label>
</div>
How to know if this one is checked or unchecked when a user click on it ?
Here what i tried:
$(document).on('click','.try',function(e){
if($(".checkit").is(':checked')) {
alert("checked");
} else {
alert("Not checked");
}
});
But i don't get it working !
Try to use this:
$(".checkit:checked").length > 0;
or
$(".checkit").is(":checked")
You need to change your html from checked="" -> checked
<input checked type="checkbox" class="checkit">
Jquery is correct as is
I have a dynamic form that has a number of checkboxes in it. I want to create a "select all" method that when clicked automatically checks all the boxes in the form.
[x] select all //<input type="checkbox" id="select-all"> Select all
[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">
[submit]
My jQuery is as follows:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value );
$(this).prop('checked', true);
console.log(this);
});
} else {
console.log("not checked");
}
});
});
My console output:
> Check detected
> Checking the item with value:1
> <input type="checkbox" id="1" class="checkbox1" value="1">
> Checking the item with value:2
> <input type="checkbox" id="2" class="checkbox1" value="2">
I am able to loop through each item however, I am not sure how to actually set the checkbox to checked.
The part I am struggling with is the actual setting of the checked state, I know I need to use: .prop('checked',true) however, what do I use for the actual element? $(this) obviously does not work...
$(this).prop('checked', true);
Use this simple code
$(".checkAll").change(function(){
$('.checkbox1').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />
<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
You are referring #select-all as (this.checked) ,You need to refer as $(this).
Secondly you can use :checked to find out if it is checked or not.
Thirdly you dont need to loop over $('.checkbox1'). jquery will match all elements and will update the attribute.
Below is the snippet which may be helpful
$(document).ready(function() {
$('#select-all').click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$('.checkbox1').prop('checked', true)
} else {
$('.checkbox1').prop('checked', false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$('.checkbox1').click(function(event) {
if ($(this).is(':checked')) {
// #select-all must be checked when all checkbox are checked
} else {
if ($('#select-all').is(':checked')) {
$('#select-all').prop('checked', false)
}
}
})
});
JSFIDDLE
demo link
js code
$('.checkbox1').click(function(event) {
var _this = $(this);
if (!_this.prop('checked')) {
$('#select-all').prop('checked', false)
}
})
$('#select-all').click(function() {
var _this = $(this);
var _value = _this.prop('checked');
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value);
$(this).prop('checked', _value);
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all
<input type="checkbox" id="1" class="checkbox1" value="1">
<input type="checkbox" id="2" class="checkbox1" value="2">
Just to answer this question. I tried the various solutions offered and they appeared not to work. However I then realised that due to using Jquery Uniform I needed to add an additional bit of code to get the display to work correctly:
This post was helpful.
Thank you to all who have taken the time to answer.
My final code:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
$('.checkbox1').prop('checked', true);
} else {
$('.checkbox1').prop('checked', false);
}
$.uniform.update('.checkbox1');
});
});
I still learning javascript, i think this is ez question, but i can't fix it with my experience (already try search some source), this my code
This is example:
PHP
<?php
<input type="checkbox" checked="checked" value="1" class="box_1">1</label> // checked
<input type="checkbox" value="2" class="box_1">2</label> //unchecked
<input type="checkbox" checked="checked" value="3" class="box_1">3</label> // checked
<input type="checkbox" value="4" class="box_1">4</label> //unchecked
<input type="checkbox" checked="checked" value="5" class="box_1">5</label> // checked
<input type="button" value="Submit" id="button-price" class="button" />
?>
I try check the check box with javasript by class, (i can't use by name&id because i use looping)
I try build condition like this Javascript :
$('#button-price').bind('click', function() {
var box = '';
$(".box_1").each(function(){ // for each checkbox in class box_1(1-5)
if(this).attr("checked","true"){ // if this checked box is true
var value = (this.value).toLowerCase(); // take the value
box = box + value; // store to box
}
});
});
when click button then take value and store to box,
I know there error in here if(this).attr("checked","true"){
what it should be writing the condition?
Try using prop instead of attr
if($(this).prop('checked')) {
}
Hope this helps.
You can use the jQuery .prop() method to check the checkbox state:
if ($(this).prop("checked")) { // if this checked box is true
box += $(this).val().toLowerCase(); // store to box
}
Suggestion: (this.value).toLowerCase() will work but try not mixing up jQuery code with pure javascript. Instead of it you can use the solution above.
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo
I have this HTML code
<input type="checkbox" name="city_pref[]" id="city_all" value="0" checked /><label for="city_all">All</label>
<input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /><label for="city_pref_1">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /><label for="city_pref_2">Texas</label>
And, I have placed my code in a fiddle, which is working correctly. What I really want to do is, when none of the checkboxes are selected, then I want the all checkbox to get selected automatically.
try the following:
$('input[type=checkbox]').change(function(){
if ($('input[type=checkbox]:checked').length == 0) {
$('#city_all').prop('checked', true)
}
})
DEMO
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]:checked').length == 0)
$('#city_all').attr('checked', 'checked');
});
All you really need is one line ?
$('input[type="checkbox"][name="city_pref[]"]').on('change', function(e){
this.checked ? $(this).siblings('[name="city_pref[]"]').prop('checked', false) : $("#city_all").prop('checked', true);
});
FIDDLE