I have dynamically created a list of checkboxes inside a table:
$("#employeeRegister").append('<tr><td><input type="checkbox" class = "check" name ="chk'+i+'" value="'+this.employeeMobileNo+'$'+this.employeeEmailId+'" </td></tr>');
The above code runs 10 times inside a loop to generate 10 checkboxes dynamically.
I tried using this below code to see if a checkbox is checked.
$(document).ready(function () {
$(document).on("click", "#smsbutton", function () {
console.log('alert');
$("input:checkbox[name=type]:checked").each(function () {
alert(checked);
});
});
});
smsbutton is a button on whose click event I want to get checkboxes that are checked. But it does not work. What do I do to get all checked checkboxes?
Try this:
$("input.check:checked").each(function() {
alert(this.name + " is checked");
});
just use an attribute selector like
$(document).on("click","#smsbutton", function(){
$('input[type="checkbox"]:checked');
console.log($('input[type="checkbox"]:checked').serialize());
});
OR
$(document).on("click","#smsbutton", function(e){
if (e.handled !== true) {
e.handled = true;
e.preventDefault();
$('input[type="checkbox"]:checked').each(function() {
console.log(this.value);
});
}
});
Related
I have a check box called, On click of that check box I am calling a function below.
$('#checkbox-id').on('click', function(){
alert("clicked");
}).each(function(){this.checked = ace.settings.is('main-container', 'fixed')})
Same method I want to call from different function. First I need to check weather checkbox is checked or not after that I need to call function once checkbox is check for this I am using this code.
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
$('#checkbox-id').click() // getting called but also unchecking checkbox it should not uncheck
}
});
This is working but it also unchecking checkbox which I don't want.
So How can I call that function without unchecking checkbox.
Here is JSFIDDLE to reproduce.
You can check If Check Box Is Checked Like :
$(document.body).on('change', '#chkID', function () {
if (this.checked) {
// CHECK BOX IS CHECKED
}
else {
// CHECK BOX IS NOT CHECKED
}
});
DEMO
Try declaring your function instead of using an anonymous function:
function handle_click() {
alert("clicked");
}
$('#checkbox-id').on('click', handle_click);
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
handle_click();
}
});
you can use this ,this will fire the alert once the checkbox become checked
$('#checkbox-id').on('click', function () {
if ($(this).prop("checked") == true) {
alert("clicked");
}
});
Try trigger() instead:
$('#checkbox-id').trigger('click');
Only workaround not proper solution
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked) {
$('#checkbox-id').click() // getting called but also unchecking checkbox should not uncheck
$('#checkbox-id').prop('checked', true);
}
});
On my table clicking the row will highlight it, and should also check the corresponding checkbox. Furthermore if the checkall checkbox is checked, all rows should be highlighted. If the checks remove, the highlights should be removed. I cannot give ids and would like to do this dynamically with .find() or .closest() or something similar. Any ideas? Thanks in advance! http://jsfiddle.net/7vLdxddr/3/
jQuery
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$("input[type=checkbox].checkall").on("click", function () {
$(this).parents('.table:eq(0)').find('input:checkbox').prop('checked', this.checked);
});
Use an instance of this (which refers to the row clicked on) and find
$(this).find(":checkbox").prop("checked", true);
http://jsfiddle.net/2wpmxdp0/1/
Use the checked property to add and remove class.
$('table').on('click', 'tr', function () {
var $this = $(this),
$rowCheckbox = $this.find(":checkbox");
// Add and remove class based on the class on the row
// You can always use this as the event is bound to the
// row which is clicked. So can use the this context
if ($this.hasClass('selected')) {
$this.removeClass('selected');
// Uncheck the checkbox if already selected
$rowCheckbox.prop('checked', false);
} else {
$this.addClass('selected');
$rowCheckbox.prop('checked', true);
}
});
// No need to use the checkbox selector again
// You have already added the class to it
$(".checkall").on("click", function (e) {
// To make sure the row event is not fired
// due to event bubbling
e.stopPropagation();
var isChecked = this.checked,
$table = $(this).parents('.table:eq(0)'),
$rows = $table.find('tr');
$table.find('input:checkbox').prop('checked', isChecked);
this.checked ? $rows.addClass('selected') : $rows.removeClass('selected');
});
Updated Fiddle
I have a list of checkbox and want to select the only one check box and add the class for the checkbox input and select another checkbox remove that class from the existing checkbox
$('input.myclass').click(function ()
{
var id = $(this).attr('id').replace('image-','');
$('input.myclass:checked').not(this).removeAttr('checked');
var sFilter = "";
$('input.myclass[type=checkbox]').each(function () {
sFilter = sFilter + (this.checked ? $(this).val() : "");
});
check();
});
function check(){
var a = $('input:checkbox[name=cover_image]:checked').val();
alert(a);
}
I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that
If you really want to use checkboxes(and not radio buttons) for some reason, do something like this:
$('input:checkbox').on('click', function () {
$('input.selected').removeClass('selected').prop('checked', false);
$('input:checked').addClass('selected');
});
Edit: Removing the attribute works, but property manipulation is a slighty better way of doing it(as suggested by RobG)
For your purpose first remove classes from all checkbox and unchecked them and then add class to clicked checkbox and checked it as below
$("input[type='checkbox']").on('click', function () {
$("input[type='checkbox']").removeClass('selected').attr('checked', false);
$(this).addClass('selected').attr('checked', true);
});
Check this Fiddle for your question
you may use on() to listen the changes on group of checkboxes.
var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
$checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
$(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});
working FIDDLE is here
Currently I have two tables
I have select-all functions on the top left checkboxes, but clicking on one select-all highlights all checkboxes in BOTH tables, whereas I only want all boxes to be selected in the specific 'check-all' clicked.
Also, when I do select all and click one of the directional buttons < or >, it drags all the rows fine but drags the headers with it as shown here:
My JQuery is quite simple at the moment but I'm obviously missing out on something -
$('#select-all').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = false;
});
});
Where 'select-all' is the id of the select-all checkbox in the 'tarifs de quittancement'.
Any help is appreciated
EDIT
My JQuery for the > button code is as follows :
$("#move-to-1").on("click", function () {
var selected = $("#table2").find("input:checked");
selected.each(function (idx, elem) {
$(elem).closest("tr").detach().appendTo($("#table1 tbody"));
});
});
This works fine to move all from one table to the other, but I don't want the row containing the select-all checkbox/table headers to move with the rest of the row data. How can this be done?
Thanks again.
Further Edit
Now it's all sorted, except for a small bug where selecting one checkbox row (not select-all) and moving it < or > results in ALL rows being moved.
JQuery in use:
$('#move-to-1').on('click', function () {
var selected = $('#table2').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
$('input[type=checkbox]').attr('checked', false);
});
});
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
You only need to modify the checkboxes inside the current table. Since you haven't shown your markup it is extremely hard to guess how the proper selector might look or whether you are using tables at all but try like this:
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
UPDATE:
To address your second question, assuming you have separated the headers from the body inside those tables using the <thead> and <tbody> sections which is the correct way, you could adapt your selector:
$('#move-to-1').on('click', function () {
var selected = $('#table2 tbody').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tr').detach().appendTo($("#table1 tbody"));
});
});
$('#select-all').click(function (event) {
// mention the table
var table = $('selector_to_your_table');
if (this.checked) {
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = false;
});
});
Note
In latest version of jQuery :checkbox is deprecated. See here..
Instead of :checkbox use input[type=checkbox].
Instead of:
$(':checkbox').each(function () {
this.checked = true;
});
Do:
$('some_sort_of_selector :checkbox').attr('checked', true);
You don't need that each() loop - jQuery does it automatically. You need some kind of selector to limit which checkboxes are changed.
I notice you have #select-all - and yet you say you have two select-all checkboxes. You can't do that. ID's must be unique.
I want to make a script which will disable a select form element upon checking desired checkbox. Since there will be more times I will use this, I wanted to make it as a function which takes target selection id as an argument. The problem is, this function doesn't work when I'm passing the id as argument. On the contrary, it seems to work with hard-coded id.
<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">
function toggleSelection(id){
var el = '#' + id;
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
toggleSelection('worldSelect');
$('#worldcb').click(toggleSelection);
});
You can't invoke the same function twice and expect the function to remember the id variable.
However you could do something like this:
function toggleSelection(e){
var el = '#' + e.data;
console.log(arguments);
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
$('#worldcb').click('worldSelect', toggleSelection);
});
Fiddle: http://jsfiddle.net/4ZBne/1/
How about:
$('#worldcb').click(function() {
toggleSelection('worldSelect', $(this).is(':checked'));
});
function toggleSelection(sel, chk) {
$('#' + sel).attr('disabled', chk);
}
jsFiddle example.
The toggleSelection() function takes two arguments, sel - the ID of the select box and chk, the checkbox to use.