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
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've created a radio buttons for selection and there is "other" button when clicked by user it'll open text-box so that user can manually specify some text inside it.
<label><input type="radio" name="option" value="">Web</label>
<label><input type="radio" name="option" value="">Mobile Apps</label>
<label><input type="radio" name="option" value="other">Other</label>
<input typt="text" placeholder="Specify here" id="other-text">
And javascript
$(".option").change(function () {
//check if the selected option is others
if (this.value === "other") {
//toggle textbox visibility
$("#other-text").toggle();
}
});
This is what i've tried but somehow it's not working.
I'm newbie to javascript so please help me.
Thanks in advance.
If possible can you also tell me how to put jsfiddle/codepen links?
Please try this:
$(".js-option").click(function () {
//check if the selected option is others
if ($(this).val() == "other") {
$("#other-text").show();
}else{
$("#other-text").hide();
}
});
#other-text{
display:none;
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<label><input type="radio" name="option" class="js-option" value="">Web</label>
<label><input type="radio" name="option" class="js-option" value="">Mobile Apps</label>
<label><input type="radio" name="option" class="js-option" value="other">Other</label>
<input typt="text" placeholder="Specify here" id="other-text">
Try this
JAVASCRIPT
$("[name='option']").change(function () {
//check if the selected option is others
if (this.value === "other") {
//toggle textbox visibility
$("#other-text").show();
} else {
//toggle textbox visibility
$("#other-text").hide();
}
});
You are using a class selector $(".option"). But you have not assigned any class to it. Unless you assign a class you have to use jquery input name selector to target the element
$( "input[name='option']" ).change(function(){
// $(".option").change(function () { // if using class
if (this.value === "other") {
$("#other-text").show();
}
else{
$("#other-text").hide();
}
});
Check this JSFIDDLE
Set other text box display none first ! Then display text when click radio button other ...
<input typt="text" placeholder="Specify here" id="other-text" style="display:none">
<script type="text/javascript">
$(":radio").change(function () {
//check if the selected option is others
$("#other-text").hide();
if (this.value === "other") {
$("#other-text").show();
}
});
</script>
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');
});
});
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 .
i have a list of check-boxes which is created dynamically and there is input field for each check box so i want to disable the check box if input field value is zero. below is my code
HTML code
<input class="check" id="check" name="check" type="checkbox"><label for="check">checkbox <input type="hidden" id="test" value="0" /></label>
<input class="check" id="check1" name="check1" type="checkbox"><label for="check1">checkbox1 <input type="hidden" id="test" value="6" /></label>
Jquery
if($("#test").val() == "0"){
$('.check').attr("disabled", "disabled");
}
jsfiddle
You used twice id=test and JavaScript works with only the first of them.
Change id=test to class=test, or works with two differents ids.
Working code:
$('.test').each(function() {
if ($(this).val() == '0') {
$(this).parent().prev().attr('disabled', 'disabled');
}
});
http://jsfiddle.net/cDD5L/
$("input[type=hidden]").each(function() {
if($(this).val()==0){
$(this).parent().prev().attr('disabled', 'disabled');
}
});
Demo:
http://jsfiddle.net/SxypS/
Please use
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
It will work for you.
Let me know if still not work