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
Related
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">
I'm trying to get a group of checkboxes as part of an overall form I created in the admin area of WordPress to validate. Basically, custom fields. Here's what the code looks like:
<div><label><input type="checkbox" value="0-2" name="_ecp_custom_5[]" /> 0-2</label></div>
<div><label><input type="checkbox" value="3-5" name="_ecp_custom_5[]" /> 3-5</label></div>
<div><label><input type="checkbox" value="6-8" name="_ecp_custom_5[]" /> 6-8</label></div>
and so on.....
So I have this in my JavaScript:
jQuery(document).ready(function($) {
$('[name="_ecp_custom_3"]').attr("required", true);
$('[name="_ecp_custom_5[]"]').prop("checked", true);
});
First line for a text field, works great. But the checked one underneath doesn't work at all. If I submit the form without checking a box, the form still publishes and when it comes back, all the fields are now checked even though I didn't check any of them.
Puzzled what to do in regards to that since there's going to be several rules in this validation function.
If you are using html:
An html element name and id cannot include special characters, such as [ ], and must begin with a letter (A-Z), (a-z).
Aside from that, your jQuery references an element with the name=_ecp_custom_5 and not name=_ecp_custom_5[]. Simply remove the [] in your names and your code will work.
Update
The $('[name=foo]').prop("checked", true) sets all checkboxes with name=foo to checked. I'm a bit confused about what you are asking at this point, since it seems like you are confused about why your form is submitting all checkbox inputs as checked?
You want to require that at least one checkbox is checked, right?
You can iterate all inputs with the name attribute value of "_ecp_custom_5[]" by using jQuery.each(). With that, you can create any flag variable that will be used on any condition.
Please refer to the snippet below if you can't visualize what I am trying to say.
If you want to require that at least one checkbox is checked, you can use this example as your basis
$(function() {
$('#btnValidate').click(function() {
var flag = false;
$.each($('[name="_ecp_custom_5[]"]'), function(index, value) {
var checkboxStatus = $(this).prop('checked');
if (checkboxStatus == true) {
flag = checkboxStatus;
}
});
if (flag == false) {
alert('No checkbox has been checked')
} else {
alert('Success!')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" value="0-2" name="_ecp_custom_5[]" /> 0-2
</label>
</div>
<div>
<label>
<input type="checkbox" value="3-5" name="_ecp_custom_5[]" /> 3-5
</label>
</div>
<div>
<label>
<input type="checkbox" value="6-8" name="_ecp_custom_5[]" /> 6-8
</label>
</div>
<button id="btnValidate" style="margin-top: 20px;">Validate</button>
How I did it?
I iterated all inputs with the name attribute value of "_ecp_custom_5[]".
Then I created a boolean variable named "flag" (default value is false) that is being changed to true only if a checkbox from the iteration has the prop('checked') value of true. If no checkbox has been checked, then the "flag" variable's value will remain false which will then be checked by my condition.
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
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.
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.