I am facing one issue
HTML
<input id="cb" type="checkbox" name="Employment_Staus" value="E" />
<input type="button" value="Check" id="id" />
JQUERY
$('#id').click(function(){
$('input[type="checkbox"]')[0].setAttribute("checked", "checked");
});
First time when I click on check button, it works!(it check the check-box ), then I manually uncheck the check box!
When I press check button again after uncheck manually , it not work!
I don't want to use attr or prop etc etc !!
Example
http://jsfiddle.net/wL6qr0hp/4/
The checked attribute sets the default state, not the current state.
Modify the checked property (with .checked = true) instead.
Related
I have a form with checkbox and I want to keep it checked after submitting the form when it goes back to the same view with an error. I heard that the value attribute can help me to make the checkbox be checked so im trying to set it to true/false. Anyway, the input value stays "false" even if I click it. What happens exactly?
I thought the value goes true/false after clicking the checkbox
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
<script>
$("#checkbox1").is(':checked', function(){
$("#checkbox1").attr('value', 'true');
});
</script>
If I understand the question, you want to change the value of the checkbox depending if it is checked or not.
Here is one solution:
$('#checkbox-value').text($('#checkbox1').val());
$("#checkbox1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
$('#checkbox-value').text($('#checkbox1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
<div id="checkbox-value"></div>
Use Checked = true
$("#checkbox1").prop('checked', true);
Note: I am not clear whether you want to onclick/onchange event on checkbox. is(":checked", function(){}) is a wrong in the question.
To return true or false depending on whether a checkbox is checked or not, I use this in JQuery
let checkState = $("#checkboxId").is(":checked") ? "true" : "false";
Try this
$("#checkbox1").is(':checked', function(){
$("#checkbox1").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">
Checkboxes can be really weird in JS. You're best off checking for the presence of the checked attribute. (I've had older jQuery versions return true even if checked is set to 'false'.) Once you've determined that something is checked then you can get the value from the value attribute.
jQuery.is() function does not have a signature for .is('selector', function).
I guess you want to do something like this:
if($("#checkbox1").is(':checked')){
$("#checkbox1").attr('value', 'true');
}
I'm going to post this answer under the following assumptions.
1) You (un)selected the checkbox on the first page and submitted the form.
2) Your building the second form and you setting the value="" true/false depending on if the previous one was checked.
3) You want the checkbox to reflect if it was checked or not before.
If this is the case then you can do something like:
var $checkbox1 = $('#checkbox1');
$checkbox1.prop('checked', $checkbox1.val() === 'true');
Or you can solve this with only JavaScript by using onClick:
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false" onClick={e => console.log(e.target.checked)}>
Good practise to use this:
$('.name-checkbox:checked').length
Why this code always alert "on"? No matter if it's checked or unchecked, it always print on.
click:
<input type="checkbox" onclick="alert(this.value)" />
http://jsfiddle.net/5yn78jhz/
Use "this.checked" instead of "value" to get true or false for checked or unchecked.
Your checkbox doesn't have a value, so JavaScript uses the default value. If you want something else, you'll need to use the value attribute value="some value". Also, the code isn't checking to see if the checkbox has been checked or not, so it will always give you the value of the checkbox, whether it's checked or not.
For example
<input type="checkbox" onclick="if(this.checked) { alert(this.value); }" />
Will only display something if the checkbox is checked.
This is the way onclick action works. You can use a js function to check if is true/false like this:
html
<input type="checkbox" onclick="check(this)" />
js
function check(obj){
if(obj.checked){
alert(obj.value);
}
}
fiddle
How to set Radio button checked(select) using Attribute value
html :
<div class="controls">
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="1" />
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="0" />
</div>
now i m getting the value of chairs_canadd value from database via AJAX. if the value is 0 then the second have to get selected , if the value is 1 then first one has to be get selected.
Firstly, your IDs are not unique.
Second, a radio button group like this can only have one checked value at a time. So why not just use .val:
$('input:radio[name=chairs_canadd]').val([editValue.chairs_canadd]);
jsFiddle
You have value for option that needs to be set in variable chairs_canadd. you can get the radio button by value and then set it. Like this:
$(".controls input[value="+chairs_canadd+"]").prop("checked", true)
I am currently working on a project where we render a dynamic page based on what we are holidng in a SQL table. We have conditional validation for controls where you can say
if x is equal to y then enable controls abc
I have multiple radio buttons in a group, the last control is "Other (please specify)" which when true will enable a textbox to specify so I need to capture when this is set to both true or false. Currently I am doing something like this
<input type="radio" name="test" value="Yes" />
<input type="radio" onchange="onChange()" name="test" value="No" />
<script type="text/javascript">
function onChange() {
alert('Changed')
}
</script>
If I check NO I get an alert. If I then check YES it changes the NO radio button checkstate but doesn't display an alert - any solutions?
The only thing I can suggest is putting an onchange on the whole group and then checking which is selected when they change. Not very elegant but it appears that this is just how the change event works (ie it only responds to a user change, not to a system change of it).
<input class=checked-val type="checkbox" value="foo" checked="true" />
<input class=checked-val type="checkbox" value="bar" checked="true" />
Initially both checkbox are checked. But When I click any checkbox its checked value should be changed to checked=false. How can I do it using jquery or javascript?
You need to remove the attribute "checked".
$("#selector").removeAttr("checked");
Obviously the checkbox will check/uncheck anyway when a user clicks on it, but if you want to do it programatically:
<script type="text/javascript">
document.getElementById('cb_foo').checked = true;
document.getElementById('cb_bar').checked = true;
</script>
<input class=checked-val type="checkbox" id="cb_foo" value="foo" checked="true" />
<input class=checked-val type="checkbox" id="cb_bar" value="bar" checked="true" />
Use this:
$('.checked-val').removeAttr('checked');
Please note the syntax of your input must be:
<input type="checkbox" value="..." name="..." class="checked-val" checked="checked" />
The mechanic behind the check are:
With checked="checked", checkbox active and posted by the form submit
Without attribute checked, checkbox not selected and not posted by the form submit
Initially both checkbox are checked.
But When I click any checkbox its
checked value should be changed to
checked=false. How can I do it using
jquery or javascript?
If you want this to happen you can .one() which attaches an event handler that only fires once. Combine that with the other items you can simply uncheck both boxes.
$(".checked-val").one("click", function(){
$(".checked-val").removeAttr("checked");
});
Code example on jsfiddle.