Develop Reference

How find empty input value in jquery

I have two checkboxes the one checkbox value is 1 and the second one is 0.
One checkbox is for enabling and other for disabling. Now I want to identify when a user clicks on Disable checkbox How I will get Disable checkbox value and if a user clicks on Enable box then how I will get Enable Checkbox value
<input type="radio" name="forgot_pass" class="forgot_pass_enable" value="1" checked>
<input type="radio" name="forgot_pass" class="forgot_pass_disable" value="0">
I have tried This code but it's not working for me any help
$("body").on('change', '.forgot_pass_enable', function(event)
{
event.preventDefault();
/* Act on the event */
if($('.forgot_pass_enable').val().length > 0)
{
var status = 1;
console.log(status);
}
if($('.forgot_pass_disable').val().length > 0)
{
var status = 0;
console.log(statusasdad);
}
});

Neither of the elements you've shown are checkboxes - they are radio inputs.
To get the selected value apply the same class to both elements, then hook the change event to that class. Then you can simply read the value from it, like this:
$("body").on('change', '.forgot_pass', function(e) {
e.preventDefault();
var status = this.value;
console.log(this.value === '1' ? 'enabled' : 'disabled', status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="radio" name="forgot_pass" class="forgot_pass" value="1" checked="checked">
<input type="radio" name="forgot_pass" class="forgot_pass" value="0">
If you did want to use a checkbox for this, which would be more applicable for an enable/disable switch, then the method is the same except you look for the checked property instead:
$("body").on('change', '.forgot_pass', function(e) {
e.preventDefault();
var status = this.checked ? '1' : '0'
console.log(status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" name="forgot_pass" class="forgot_pass" value="1" checked="checked">

Setting checkboxes using Jquery

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');
});
});

How do I show an input field if a radio button is checked using jquery

I have a radio button called "other," and when checked, I want a input field called "other-text" to show up. It's fairly simple, but I've been failing all morning.
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
Here is my javascript:
jQuery(function(){
jQuery("input[name=other]").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
JSFiddle of the failure. http://jsfiddle.net/Wpt3Y/532/

This works
jQuery("#other-radio").change(function(){...

Just updated your jsfiddle: http://jsfiddle.net/Wpt3Y/539/
<pre><input type="radio" name="other" id="other-radio" value="Yes"><b>Other</b></pre>
Your code works, you simply mistyped your radio input, it had two name attributes.

I suggest to go this way. Tried to use prop() but realised you use old version of jquery
jQuery("input:radio[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with radio
Instead you can use checkbox:
html
<input name="ocalls" type="checkbox" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
js
jQuery("input:checkbox[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with checkbox

<form>
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes">
<b>Other</b><br />
</input>
<input type="text" name="other-text" id="other-text" style="display: none;" />
</form>
jQuery(function(){
jQuery("#other-radio").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
Try this.

If you want that toggle effect you can use this code with the checkbox.
jQuery(function(){
jQuery("input[name=ocalls]").change(function(){
if($(this).attr("checked"))
{
$("#other-text").show();
}
else
{
$("#other-text").hide();
}
});
});

Your code is not working because you have name attribute twice in radio button.
use this:
<input type="radio" name="other" id="other-radio" value="Yes">
remove name="ocalls" attribute.

disable checkbox if input value is zero

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

Check the first checkbox, if no checkbox is selected

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