I am wondering whether or not it is possible to output the class name of checked checkboxes each time a checkbox is checked/unchecked? For example, I have 3 checkboxes. If I check one, it'll output its class name, if I then check a 2nd one it'll output the first checkbox class name + the 2nd class name. If I then uncheck the first checkbox, it'll only output the class name of the 2nd checkbox.. and so forth? I made a JSFiddle to get started... http://jsfiddle.net/LUtJF/
Thanks
$("input[type='checkbox']").change(function() {
var classes = $("input[type='checkbox']:checked").map(function() {
return this.className;
}).get().join(",");
alert(classes);
});
Your fiddle, fiddled with.
Check this fiddle: http://jsfiddle.net/eUse5/
Code:
function showChecked() {
var s = '';
$('input:checked').each(function() {
if(s!='') s += ', ';
s += $(this).attr('class');
});
alert(s);
}
$('input[type="checkbox"]').change(showChecked);
$(document).ready(function() {
var cb = $('input[type=checkbox]');
cb.change(function() {
cb.each(function() {
if ($(this).is(':checked')) {
alert($(this).attr('class'));
}
});
});
});
It can be done like
$(":checkbox").click(function(){
var classes = "";
$(':checked[class]').each(function(){ // this will filter only checked checkbox having class attribute
classes += " "+$(this).attr("class");
});
alert(classes);
});
fiddle: http://jsfiddle.net/LUtJF/7/
Related
How can I check if the selected row has a column check box checked?
I can get the column innerHTML which says <input type="checkbox"> but how to check if its checked or not.
I want to see if the CB is checked?
var l_iNoOfRows=$("#imageResultsList tr").length;
for(var i=1;i<=l_iNoOfRows;i++){
var l_oSelectedRow =$("#imageResultsList tr")[i]
var l_sCbColumn =l_oSelectedRow.cells[l_iCB].innerHTML;
}
If you can get the checkbox and create a jQuery object out of it, you can use the prop method to find the value of its 'checked' property.
$yourCheckboxElement.prop('checked') will return a boolean, true if it is checked and false if it is not.
You can count checked check boxes with below codes.
var c = $(l_oSelectedRow.cells[l_iCB]).find("input[type='checkbox']:checked").length;
and detect rows had checked check box.
if (c > 0) {
// checked check box is existed.
} else {
// checked check box is now existed.
}
FIDDLE
$('.btn').click(function () {
$('#table').find("input:checkbox:checked").each(function () {
var check = $(this).closest('tr').index();
alert(check);
});
});
Iterate through all the checked checkbox and get the index of the closest tr
FIDDLE
$('.btn').click(function () {
var index =$('.input').val();
var row = $('#table').find('tr:nth-child('+index+')').find('input:checkbox')
if(row.is(':checked')){
alert(index);
}else{
alert('no check box check');
}
});
IF you want to check the row if there is a checked check get the row number use it as selector then check that row if there is a checked checkbox
A better (and easier) way to do this is like this
$("#imageResultsList tr").each(function(){
var cb = $(this).find('input [type="checkbox"]');
if(cb.prop('checked')){
alert('Checked');
} else {
alert('Not Checked');
}
});
Use jQuerys .prop function
See documentation: http://api.jquery.com/prop/
<label for="checkbox">Checkbox</label>
<input id="checkbox" type="checkbox" />
$('input[type="checkbox"]').on('click', function() {
alert($(this).prop('checked'));
});
Example:
https://jsfiddle.net/a26sw7ba/2/
In your case you could do the following with jQuery:
var l_iNoOfRows=$("#imageResultsList tr").length;
for(var i=1;i<=l_iNoOfRows;i++){
var l_oSelectedRow =$("#imageResultsList tr")[i]
var l_sCbColumn =l_oSelectedRow.cells[l_iCB].innerHTML;
alert($(l_sCbColum).prop('checked'));
}
Obviously replacing the alert with what ever statement needed to accomplish your goals.
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
I'm trying to filter some divs with checkboxes using the following code:
$("#filterControls :checkbox").click(function() {
$(".sectionContent").hide();
$("#filterControls :checkbox:checked").each(function() {
$("." + $(this).val()).show();
});
if($("#filterControls :checkbox").prop('checked') == false){
$(".sectionContent").show();
}
});
This works fine when you check the first checkbox, but it only filters with the others when you also have the first checkbox selected. It's hard to explain but try the JSFiddle: http://jsfiddle.net/BY9JL/
I don't want it to rely on having the first checkbox checked, is there a way around this?
Try
var sections = $('.sectionContent');
function updateContentVisibility(){
var checked = $("#filterControls :checkbox:checked");
if(checked.length){
sections.hide();
checked.each(function(){
$("." + $(this).val()).show();
});
} else {
sections.show();
}
}
$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();
Demo: Fiddle
It's because your last if check, it will only check the first checkbox if it is checked or not.
You could change your last if block to see if there are any checked at all:
if($("#filterControls :checkbox:checked").length == 0){
$(".sectionContent").show();
}
I have a set groups with a checkbox, I am trying to get the value of each checkbox when is checked and appending this value to a counter span element i have next to it, but every time i click on any of the checkboxes is appending the value to all the counter elements. I created a http://jsfiddle.net/creativestudio/xm838/
This is the Js I am using:
function set_index_id_checkbox() {
$("input:checkbox[name='like']").each(function (index) {
var currElem = $(this);
var prevLabel = currElem.next();
currElem.attr("id", this.id + index);
prevLabel.attr("for", prevLabel.attr("for") + index);
});
}
set_index_id_checkbox();
function getValues() {
$("input:checkbox[name='like']").click(function () {
if ($(this).is(':checked')) {
$('.likes').html($(this).val());
}
});
}
getValues();
That's because you are selecting all the elements with class of likes, you can use prev and find or closest methods for selecting the target element.
$(this).parent().prev().find('.likes').html(this.value);
or:
if (this.checked) { // better than creating an unnecessary jQuery object
$(this).closest('.block').find('span.likes').text(this.value);
} else {
// ...
}
http://jsfiddle.net/Ud9T4/
I have a div which contains 7 checkboxes , i wrote this following code for accessing only the checked checkbox into the array icons
var icons = $("div").find("input[type=checkbox]").each(function () {
if($(this).attr("checked") == "checked") return this; });
alert(icons.length);
but it always alert 7 .Can anybody tell me the problem?
var icons = $("div").find("input[type=checkbox]:checked");
the easiest way is to assign a class to target inputs and use checked selector, see an example below:
var icons = $('.box:checked');
Hiya demo http://jsfiddle.net/KzMqB/
You probably just need to check once using :checked and it will give you what you are looking for.
good read: http://api.jquery.com/checked-selector/
Hope this helps!
code
var icons = $("div").find("input[type=checkbox]:checked").each(function() {
alert("ID of checked checkbox = " + $(this).attr("id"));
});
You can use $.map,
$(document).ready(function() {
var checks = $.map($("div").find('input[type="checkbox"]:checked'),function(arr){
return arr;
})
console.log(checks.length);
})
or your method,
$(document).ready(function() {
var checks = $.each($("div").find('input[type="checkbox"]:checked'),function(){
return this;
})
console.log(checks.length);
})
var icons= $("div").find("input:checked").length;
alert(icons);