I'm having trouble figuring this out. I have two checkboxes (in the future will have more):
checkSurfaceEnvironment-1
checkSurfaceEnvironment-2
Basically, I want to write an if statement and test if one of them is checked and another is NOT checked. What's the easiest way to accomplish the following:
if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
$("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
// do something
}
This question is related to
jquery
if-statement
To do it with .attr()
like you have, to see if it's checked it would be .attr("checked", "checked")
, and if it isn't it would be .attr("checked") == undefined
I think the easiest way (with jQuery) to check if checkbox is checked or NOT is:
if 'checked':
if ($(this).is(':checked')) {
// I'm checked let's do something
}
if NOT 'checked':
if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}
Simple and easy to check or unchecked condition
<input type="checkbox" id="ev-click" name="" value="" >
<script>
$( "#ev-click" ).click(function() {
if(this.checked){
alert('checked');
}
if(!this.checked){
alert('Unchecked');
}
});
</script>
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
if (item.is(":checked")==true) {
//execute your code here
}
else if (item.is(":not(:checked)"))
{
//execute your code here
}
});
Here I have a snippet for this question.
$(function(){_x000D_
$("#buttoncheck").click(function(){_x000D_
if($('[type="checkbox"]').is(":checked")){_x000D_
$('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");_x000D_
}else{_x000D_
$('.checkboxStatus').html("Sorry! Checkbox is not checked");_x000D_
}_x000D_
return false;_x000D_
})_x000D_
_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<form>_x000D_
<p>_x000D_
<label>_x000D_
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">_x000D_
Checkbox</label>_x000D_
<br>_x000D_
<label>_x000D_
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">_x000D_
Checkbox</label>_x000D_
<br>_x000D_
</p>_x000D_
<p>_x000D_
<input type="reset" value="Reset">_x000D_
<input type="submit" id="buttoncheck" value="Check">_x000D_
</p>_x000D_
<p class="checkboxStatus"></p>_x000D_
</form>
_x000D_
I know this has already been answered, but still, this is a good way to do it:
if ($("#checkbox").is(":checked")==false) {
//Do stuff here like: $(".span").html("<span>Lorem</span>");
}
You can also use either jQuery .not()
method or :not()
selector:
if ($('#checkSurfaceEnvironment').not(':checked').length) {
// do stuff for not selected
}
From the jQuery API documentation for the :not()
selector:
The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.
There are two way you can check condition.
if ($("#checkSurfaceEnvironment-1").is(":checked")) {
// Put your code here if checkbox is checked
}
OR you can use this one also
if($("#checkSurfaceEnvironment-1").prop('checked') == true){
// Put your code here if checkbox is checked
}
I hope this is useful for you.
if($("#checkbox1").prop('checked') == false){
alert('checkbox is not checked');
//do something
}
else
{
alert('checkbox is checked');
}
I was looking for a more direct implementation like avijendr suggested.
I had a little trouble with his/her syntax, but I got this to work:
if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)
In my case, I had a table with a class user-forms
, and I was checking if any of the checkboxes that had the string checkPrint
in their id
were unchecked.
Here is the simplest way given
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").change("click", function () {
if (this.checked)
{
//do something
}
if (!this.checked)
{
//do something
}
});
});
</script>
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
// do something if the checkbox is NOT checked
}
I used this and in worked for me!
$("checkbox selector").click(function() {
if($(this).prop('checked')==true){
do what you need!
}
});
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )
An alternative way:
Here is a working example and here is the code, you should also use prop.
$('input[type="checkbox"]').mouseenter(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
alert("is checked");
} else {
//$(this).prop('checked',true);
alert("not checked");
}
});?
I commented out the way to toggle the checked attribute.
Return true if all checbox are checked in a div
function all_checked (id_div){
all_checked = true;
$(id_div+' input[type="checkbox"]').each(function() {
all_checked = all_checked && $('this').prop('checked');
}
return all_checked;
}
try this one
if ($("#checkSurfaceEnvironment-1:checked").length>0) {
//your code in case of NOT checked
}
In Above code selecting the element by Id (#checkSurfaceEnvironment-1)
then filter out it's checked state by (:checked)
filter.
It will return array of checked element object. If there any object exists in the array then if condition will be satisfied.
Source: Stackoverflow.com