I have some little problems about testing if a checkbox is checked with jQuery. I've a table and in every row a checkbox with the same ID.
<td><input id="hp" type="checkbox" aria-label="..." checked></td>
This is the jQuery function:
$('#hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
But it only works with the first row of table. Any suggestions?
try like
<td><input id="hp" type="checkbox" class='checkBoxClass'></td>
and
$('.checkBoxClass').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
Change your code as below :
HTML Code
<td><input id="hp" class="hp" name="hp[]" type="checkbox" aria-label="..." checked></td>
Javascript
$('.hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
I hope it work for you.
how about?
$('input[type="checkbox"]').bind("click", function() {
if(this.checked) {
alert("check");
} else {
alert ("unchecked!");
}
});
DEMO
http://jsfiddle.net/n2cgnodp/
So, ID must be unique, if you use #hp on multiple elements, jQuery / JS will return only the first one!
Use .class instead:
jsBin demo
<input class="hp" type="checkbox" aria-label="..." checked>
$(".hp").on("change", function(){
alert(this.checked? "YEY!" : "Not checked :( ");
});
If there is no way other than giving same id to each checkbox then go for following code:
$('body #hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
Here $('body #hp') will give you all the elements with same id as hp
Related
I am trying to figure out how to set toggle switch button base on a value. I am using bootstrap for the button. Anyone please tell me what is wrong?
*user.isActive only have two value either true or false.
<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='${user.isActive}'/></td>
<script>
$(document).ready(function() {
if($('#activeStatus').val() == 'true'){
$("#activeSwitch").attr("checked", "checked");
}
else if($('#activeStatus').val() == 'false'){
...
}
});
</script>
I found the answer so wanted to share with people who need help too. For people using bootstrap use:
$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").bootstrapToggle('on');
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").bootstrapToggle('off');
}
});
Use .bootstrap('on') instead of prop or attr if they are not working.
Try like this prop() instead of attr => prop('checked',true). use Boolean value instead of string
updated
Do with trim() its remove the unwanted space
$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").prop("checked", true);
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='true' /></td>
or single line code
$(document).ready(function() {
$("#activeSwitch").prop("checked" , $('#activeStatus').val().trim() == 'true')
})
I've multiple checkbox inputs while some them are disabled. So when I click select all/unselect all the checkbox at the top, I want to apply this event for the only enabled check boxes. Also when I've all the checkboxes checked by clicking on each one, then the select all checkbox must be clicked.
Note : Also I've one functionality, when the enabled checkbox is clicked and followed by the save click, then that particular checkbox will be disabled.I can add a new checkbox using add new checkbox button. When a new checkbox is added the select all/unselect all checkbox must be unchecked.
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
Fiddle
To detect disabled check boxes you can use jquery filter method like this:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
by using filter like this, JQuery changes checkboxes that have not disabled attribute.
and use .prop('checked', false) or .attr('checked', false) to uncheck checkboxes on add new checkbox button.
so to uncheck select all on save and add checkbox use:
$("#ckbCheckAll").attr('checked', false);
and to uncheck all enabled checkboxes on addcheckbox use:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
You should also use $(document).on("click",".checkBoxClass",function(){}) binder to let JQuery bind click event for dynamically added checkboxes. by doing that and add some extra jquery, select all checkbox, checked when ever all checkboxes are checked.
Updated Fiddle
try this, it will get only enable checkobox and select/unselect them.
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
check fiddle
http://jsfiddle.net/p73wW/8/
Try this :
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
Updated Fiddle
Here is another method. Instead of using filter I have used :enabled. Also used on jquery to detect new added checkbox. Hope it will help you.
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
demo
I have this checkbox:
<input type="checkbox" name="foo[]" value="111111">
<input type="checkbox" name="foo[]" value="222222">
<input type="checkbox" name="foo[]" value="333333">
And i'm trying to get the value from the selected checkbox
$("input:checkbox[name^='foo']").each(function(){
var val = $(this).val();
alert(val);
});
But the event isn't called.. Am I doing something wrong?
Sorry for bad english!
Don't use each.
Use .on('change') for your event. Also this.value is easier than $(this).val().
http://jsfiddle.net/65u2t/
$("input:checkbox[name^='foo']").on('change', function () {
var val = this.value;
alert(val);
});
USe is(":checked") to check whether the checkbox is checked
$("input:checkbox[name^='foo']").click(function () {
$("input:checkbox[name^='foo']").each(function () {
if ($(this).is(":checked")) {
alert($(this).val());
}
});
});
Demo
Something very fundamental many of us for get is DOM ready:
$(function() {
$(":checkbox[name^='foo']").on('change', function () {
alert(this.value + ' --- ' + this.checked);
});
});
JS FIDDLE DEMO
I have this code
<form action="creatPro.php">
<input type="checkbox" name="okk" value="agree" id="okk" onClick="EnableSubmit (this)" />agree
<br />
<center>
<input type="submit" name="startthis" value="agree" disabled id="startthis" class="styled-button-8" />
</center>
</fieldset>
</form>
and this is my javascript code
EnableSubmit = function (val) {
var sbmt = document.getElementById("startthis");
if (val.checked == true) {
sbmt.disabled = false;
} else {
sbmt.disabled = true;
}
}
when the checkbox is checked the following action should be done :
enable the button submit
change the button color to blue for example
how can I change the button color using Jquery when it enabled ?
this is what I'm tried
$(document).ready(function(){
$("input[type=checkbox]").checked(function(){
$("input[type=submit]").css({"background-color":"blue"});
});
});
(http://jsfiddle.net/noha/Ev2cc/4/)
With jQuery, you can do:
$('#okk').change(function () {
if ($(this).is(':checked')) {
$('#startthis').css('background-color','blue').prop('disabled', false);
} else {
$('#startthis').css('background-color','#ccc').prop('disabled', true);
}
});
Updated Fiddle
You have not added jQuery to your fiddle Add it as a library to your fiddle and add the following line to your EnableSubmit function:
$('#startthis').css('background-color', 'blue');
You can use simply :checked selector in your css for this purpouse
#startthis:checked{background-color:blue;}
#startthis{background-color:white;}
$("#startthis").css({"background-color":"blue"});
Or
$("#startthis").css( "background-color", "blue" );
I am new to jQuery. I am wondering if there is a way to count the number of checkboxes that have been checked and then auto-submit the form once a specific number of checkboxes had been checked. Let's say the user checks 2 checkboxes, nothing happens. The user checks the 3rd checkbox and the form submits.
<input type="checkbox" onclick="this.form.submit();">
You could try this, using no inline javascript...
HTML
<form>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</form>
jQuery
$('input[type="checkbox"]').on('click', function (event) {
var flag = $('input:checked').length > 2 ? true : false;
if (flag) $('form').submit();
});
Fiddle
$('input[type="checkbox"]').on('change', function() {
if( $("input[type="checkbox"]:checked").length >=3) {
$('form').submit();
}
});
JQuery function:
function SubmitIfReady() {
if ($('.checkbox-class:checked').length == 5) { // specify the number you want
$('#YourForm').submit();
}
}
HTML (form not shown):
<input type="checkbox" class="checkbox-class" onclick="SubmitIfReady();">
Or without the onclick:
JQuery function:
$(document).ready(function () {
$('.checkbox-class:checked').on('change', function() {
if ($('.checkbox-class:checked').length == 5) { // specify the number you want
$('#YourForm').submit();
}
});
});
HTML (form not shown):
<input type="checkbox" class="checkbox-class">
Like this...
$(".counted-check").click(function(e){
var myForm = $(this).closest('form');
if(myForm.find(".counted-check").filter(":checked").length > 3){
myForm.submit();
}
});
http://jsfiddle.net/HQ5N9/