It seems that the checked property of a checkbox cannot be modified, when the event is from the checkbox itself.
Here is small example:
<input type="checkbox" onclick="this.checked=true; return false">
The checkbox is not checked after click. Why is this.checked=true ignored?
It's happening because you're returning false. This value is assigned as the input value. Try this way:
<input type="checkbox" onclick="this.checked=true">
Related
Hi I'm currently using radio buttons to pass True or False as a string in my project.
I would like to change it to a checkbox that returns the same values, i.e "True" or "False" (based on whether the checkbox is checked or unchecked) so that I'm not forced to change the condition everywhere else in my project.
<input type="radio" id="admin"
name="access" value="True">Access<br>
<input type="radio" id="donotaccess"
name="access" value="False" checked="">Do not access<br></input>
Any suggestions for the same?
Code for radio button added
You can store the value of the checkbox inside a variable hasAccess
In the following code - hasAccess is equal to True or False (string)
When you need to verify that the checkbox is checked or not you should use the variable hasAccess
var hasAccess;
function verifyCheckbox(elem) {
hasAccess = elem.checked.toString();
hasAccess = hasAccess.charAt(0).toUpperCase() + hasAccess.slice(1);
console.log(hasAccess);
}
<input type="checkbox" id="gquotas-admin-xptable-access" name="xp_table_access" onclick="verifyCheckbox(this)">Access
NOTE
You should think about using boolean instead of True/False strings
Here's a simple way of doing it:
$('#isSelected').change(function(){
var checkboxValue = $(this).is(':checked');
document.getElementById('returned').innerHTML=checkboxValue;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isSelected"/>
<div id = "returned">
Value Displayed Here
</div>
This is done in jQuery, is(':checked') returns true if checkbox is selected, and false if it is not.
Hope this helps.
I am trying to set the checked value of a checkbox to incoming data from Mongo. It works fine if the value is true, but when the value is false, it still checks the box. Can anyone tell me what is wrong.
<input type="checkbox" id="chk" name="interested" value="{{inmate.interested}}" onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk" name="correspondence" value="{{inmate.correspondence}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk" name="study" value="{{inmate.study}}" onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk" name="specialtyItemsApproved" value="{{inmate.specialtyItemsApproved}}" onclick="chkSet(this)">Specialty Items
Approved<br/>
<br>
$(document).ready(function(){
document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value;
document.getElementsByName("correspondence")[0].checked=document.getElementsByName("correspondence")[0].value;
document.getElementsByName("study")[0].checked=document.getElementsByName("study")[0].value;
document.getElementsByName("specialtyItemsApproved")[0].checked=document.getElementsByName("specialtyItemsApproved")[0].value;
});
document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value; sets the checked property based on the value of the element, which is always a string. So it will coerce the string to a boolean. All non-blank strings are truthy, so both "true" and "false" will set checked to true.
If you use an == test, you can set the checked accordingly:
document.getElementsByName("interested")[0].checked =
document.getElementsByName("interested")[0].value == "true";
That said, the purpose of the value of a checkbox in HTML/DOM is not to indicate whether it's checked, so setting value to "true" or "false" in the first place is probably not what you really want to do. The purpose of value is to say what value should be sent with the form if the checkbox is checked. Example:
<input type="checkbox" name="roomoptions" value="non-smoking">
<input type="checkbox" name="roomoptions" value="with-kitchen">
<input type="checkbox" name="roomoptions" value="en-suite">
The form will have roomoptions=non-smoking if that checkbox is checked, and/or roomoptions=with-kitchen if that checkbox is checked, and/or roomoptions=en-suite if that checkbox is checked. If none of them is checked, the form won't have any roomoptions sent at all. All three are sent if all three checkboxes are checked.
Separately, you cannot use the same id on more than one element in an HTML/DOM document. ids must be unique. So you can't use id="chk" on all of your checkboxes.
So I suspect you really want something more like this:
<input type="checkbox" id="chk-interested" name="interested" {{#if inmate.interested}}checked{{/if}} onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk-correspondence" name="correspondence" {{#if inmate.correspondence}}checked{{/if}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk-study" name="study" {{#if inmate.study}}checked{{/if}} onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk-specialty-items-approved" name="specialtyItemsApproved" {{#if inmate.specialtyItemsApproved}}checked{{/if}} onclick="chkSet(this)">Specialty Items
Then you don't need your JavaScript at all.
I didn't put a value on those, which means that when the form is sent in (if you're sending in the form), the value for interested and such that the server will receive will be the default value "on". E.g., the form will either not have an interested field at all (the checkbox wasn't checked), or it will have interested=on.
Note that unless you use those ids for something, you can just leave them off; it's the name that the form will use when submitted. But I made them unique to demonstrate that you must do that.
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
I'm really confused. I have the following html in a form:
<input class="check-box"
id="Data__Correct"
name="Data.Correct"
type="checkbox" value="Data.Correct" />
This creates the following on the web page
<input class="check-box"
id="Data__Correct"
name="Data.Correct"
type="checkbox" value="False" />
When I put a check in the checkbox, submit the form, and check with fiddler I see it's sending:
Data.Correct False
I thought it should be the other way around. What's happening?
You are misunderstanding how checkbox works. If the checkbox is unchecked then no value is passed to the backend. If the checkbox IS checked then the value in the value attribute is passed to the backend. In your case, you set value to False, so you are getting the string False not to be confused with the boolean value false.
If your intent with value='False' is to set the state of the checkbox on load, then you instead need to do this:
<input type="checkbox" ... checked/>
Or checked="checked" should also work I believe. If checked is present then the box is checked, otherwise it is unchecked.
<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.