Simple but effective and assumes you know the checkbox will be found:
$("#some_id")[0].checked;
Gives true
/false
Those 2 ways are working:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(thanks @mgsloan)$('#test').click(function() {_x000D_
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));_x000D_
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
Check me: <input id="test" type="checkbox" />
_x000D_
Just attention, as of today, 2018, due to api changing over the years. removeAttr are depricated, NOT working anymore!
Jquery Check or unCheck a checkbox:
Bad, not working any more.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
Instead you should do:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
Despite the fact that this question is asking for a jQuery solution, here is a pure JavaScript answer since nobody has mentioned it.
Simply select the element and access the checked
property (which returns a boolean).
var checkbox = document.querySelector('input[type="checkbox"]');_x000D_
_x000D_
alert(checkbox.checked);
_x000D_
<input type="checkbox"/>
_x000D_
Here is a quick example listening to the change
event:
var checkbox = document.querySelector('input[type="checkbox"]');_x000D_
checkbox.addEventListener('change', function (e) {_x000D_
alert(this.checked);_x000D_
});
_x000D_
<input type="checkbox"/>
_x000D_
To select checked elements, use the :checked
pseudo class (input[type="checkbox"]:checked
).
Here is an example that iterates over checked input
elements and returns a mapped array of the checked element's names.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked');_x000D_
var checkedElements = Array.prototype.map.call(elements, function (el, i) {_x000D_
return el.name;_x000D_
});_x000D_
_x000D_
console.log(checkedElements);
_x000D_
<div class="parent">_x000D_
<input type="checkbox" name="name1" />_x000D_
<input type="checkbox" name="name2" />_x000D_
<input type="checkbox" name="name3" checked="checked" />_x000D_
<input type="checkbox" name="name4" checked="checked" />_x000D_
<input type="checkbox" name="name5" />_x000D_
</div>
_x000D_
Try this small solution:
$("#some_id").attr("checked") ? 1 : 0;
or
$("#some_id").attr("checked") || 0;
Here is how to get the value of all checked checkboxes as an array:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
to get value of checked checkboxex in jquery
:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
in pure js
:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
$('.class[value=3]').prop('checked', true);
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
Example
Demo
The best way of retrieving a checkbox's value is as following
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
as explained in the official documentations in jQuery's website. The rest of the methods has nothing to do with the property of the checkbox, they are checking the attribute which means they are testing the initial state of the checkbox when it was loaded. So in short:
elem.checked
) or you can use $(elem).prop("checked")
if you want to rely on jQuery.elem.getAttribute("checked")
or elem.prop("defaultChecked")
.Please note that elem.attr("checked")
is modified only after version 1.6.1+ of jQuery to return the same result as elem.prop("checked")
.
Some answers are misleading or imprecise, Please check below yourself:
Use the following code:
$('input[name^=CheckBoxInput]').val();
Just to clarify things:
$('#checkbox_ID').is(":checked")
Will return 'true' or 'false'
Best way is $('input[name="line"]:checked').val()
And also you can get selected text $('input[name="line"]:checked').text()
Add value attribute and name to your radio button inputs. Make sure all inputs have same name attribute.
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
Source: Stackoverflow.com