Display number of checked checkboxes in jQuery - javascript

I am quite new to jQuery, I think this might be quite easy for many of you, but I can't seem to make it work. How can I display the number of checkboxes so that the value increases or decreases.
i tried the following but with the number in the span tag remains 0: http://jsfiddle.net/yunowork/NTwxc/
Thanks

You should listen to the change event:
$('input[type=checkbox]').on('change', function(){
var number = $('input[type=checkbox]:checked').length;
$('.totalchecked').text(number);
});
http://jsfiddle.net/NTwxc/7/
Note that val is used for getting/setting values of form elements, for other elements like span element, text or html methods should be used.

Number of checked checkboxes:
$(":checkbox:checked").length
http://api.jquery.com/checked-selector/
edit: I see in your fiddle that you already had that. I'll leave it there, since that's actually the answer to "how to display the number of checked checkboxes"...
The problem is that you're not updating and looking to see how many are checked. You need to re-run that function whenever any of the items are checked.
$(":checkbox").change(function () {
// update the span with $(":checkbox:checked").length ...
});

You shouldn't be setting .val of a span, but .text.
Also, you need to update it every time the checked state changes.
function calc() {
$('.totalchecked').text($(':checkbox:checked').length);
}
$(calc);
$(':checkbox').change(calc);
Demo

Here we are!
$('input[type="checkbox"]').change(function() {
$('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
});
http://jsfiddle.net/toroncino/PTvG8/

Problems: .val() is for form elements only. To set the content of an element, use .text() or .html() if you are inserting HTML. Second problem is that you need to register a listener to "change" events. Otherwise, the value won't update.
Updated solution: http://jsfiddle.net/NTwxc/4/
$("input[type=checkbox]").change(function(){
var number = $('input[type=checkbox]:checked').length;
$(".totalchecked").text(number);
});
​
By the way, I would personally prefer input[type=checkbox]rather than :checkbox. The former works for both CSS and jQuery.

Related

toggleClass works only on td and not whole tr

I am using a datatable whch has a checkbox on each row..
When the checkbox will be clicked, the total will have a class called "selected"
so here is my code which i have put
$("#domains_list").find("input[name=\'chk[]\']").on("click",
function()
{
$(this).closest("tr").toggleClass("selected");
});
But the problem is, instead of getting the whole as class selected, only particular td is getting highlighted.
Here's a screenshot
so, how can i solve this issue, is there any way?
As Zougen pointed out, your JS is correct - that is why the td next to the input is being colored and not the td containing the input itself. The other tds wont get highlighted probably because your CSS is being overwritten.
One thing though: your selector looks a little bit strange:
.find("input[name=\'chk[]\']") here you dont need to escape the single ' since your string delimiters are " anyways, just write:
$('td input[name*="chk"]').change(function() {
$(this).closest('tr').toggleClass("selected");
});
i have achieved the same purpose by following jQuery code, i hope this will solve your problem as wel.
$(function() {
$('td:first-child input').change(function() {
$(this).closest('tr').toggleClass("selected");
});
});

jQuery: issue with each loop

I am new to jQuery and hope someone here can help me with this:
Basically what I am trying to do is the following:
Check for all elements with the class "limit" and get their maxlength.
Find an element with the class "count" in the same row.
Add the found maxlength to the count element's text.
I am using the following but this displays the last maxlength for all the elements in question. My guess is that my last element is perhaps overwriting the others.
Can someone tell me what I have to change here ?
var limit = '';
$('.limit').each(function() {
limit = $(this).attr('maxlength');
$(this).closest('tr').find($('.count').text(limit));
});
Many thanks in advance, Mike.
Try to use:
$(this).closest('tr').find('.count').text(limit);
You don't need to convert .count to jQuery object inside .find() method. You also need to put .text() outside of .find()

If DIV contains checked checkbox set display to block

I have a menu consisting of sort criteria. The options per criteria are listed as check boxes in a div wioth class '.collapse_box'.
I need to check each of these div's to see if any of the checkboxes it contains are checked. If there are any checkedboxes I need to set the DIV display to block.
I was thinking along these lines:
$('.collapse_box')each(function()
if( $(this).(input:checked).length() > 0{ //here lies my problem
$(this).show();
}
});
Seeing that I am very new to javascript and jquery I don't know how to return the checked boxes for $(this). Or better said: the correct method to check if any checkboxes in $(this) are checked.
Your selector is wrong, element are always given as string or object:
if( $(this).find('input:checked').length > 0){
Also, length isnt a function, but a property. And you forgot the .find()
Made you a jsFiddle with demo
Alright, assuming that the inputs are children, something like this will work:
$('.collapse_box').each(function(){
if($(this).find('input').prop('checked')){
$(this).show();
}
});
The .prop('checked') piece returns a boolean value of whether the input is checked or not.
EDIT Martijn makes a good point, you can switch it to vanilla JS with a mod to the selector.
$('.collapse_box').find('input').each(function(){
var self = this;
if(self.checked){
self.style.display = 'block';
}
});

Dynamically adding onchange function to drop down with jQuery

I have a couple of drop down boxes with ids country1, country2, ... When the country is changed in a drop down the value of the country shoudl be displayed in an alert box.
if I add the onchange handler for one box like this it works fine:
$('#country1') .live('change', function(e){
var selectedCountry = e.target.options[e.target.selectedIndex].value;
alert(selectedCountry);
});
But I need to do this dynamically for all drop down boxes so I tried:
$(document).ready(function() {
$('[id^=country]') .each(function(key,element){
$(this).live('change', function(e){
var selectedCountry = e.target.options[e.target.selectedIndex].value;
alert(selectedCountry);
});
});
});
This doesn't work. No syntax error but just nothing happens when the seleted country is changed. I am sure that the each loop is performed a couple of times and the array contains the select boxes.
Any idea on that?
Thanks,
Paul
The reason .live() existed was to account for elements not present when you call the selector.
$('[id^=country]') .each(function(key,element){ iterates over elements that have an id that starts with country, but only those that exist when you run the selector. It won't work for elements that you create after you call .each(), so using .live() wouldn't do you much good.
Use the new style event delegation syntax with that selector and it should work:
$(document).on('change', '[id^=country]', function(e) {
// ...
});
Replace document with the closest parent that doesn't get dynamically generated.
Also, consider adding a class to those elements along with the id attribute.
Instead of incremental ids I'd use a class. Then the live method is deprecated but you may use on with delegation on the closest static parent or on document otherwise.
$('#closestStaticParent').on('change', '.country', function() {
// this applies to all current and future .country elements
});
You don't need an each loop this way; plus events are attached to all the elements in the jQuery collection, in this case all .country elements.

I want to check if `id` has no content

I want check between id that get in var span, if empty was between it put css for input but it not work. how can fix it?
var span = '#'+$('.valid').closest('.auto_box').find('span').attr('id');
if ($(span+':empty').length != 0) {
//alert('ok')
(this).closest('.auto_box').find('input').css('background-color','#000');
}
See here my full code: http://jsfiddle.net/Pjqv2/2/
You are using (this) instead of $('.valid') or whatever you meant with it. Also, you are doing this the wrong way; .find('span') returns the jQuery objects set for that span.
You don't need to get it's ID and then check on that ID again. More importantly, your code seems the need to run on multiple instances of .auto_box. For that, you need to iterate on the set found by (".valid").closest(".auto_box"), which you can do with the jQuery .each() (.each() in jQuery docs) like this:
var autoBoxes = $(".valid").closest(".auto_box");
autoBoxes.each(function(){
if ($(this).find("span").is(":empty")) {
$(this).find("input").css("background-color", "#000");
}
});
Your updated jsfiddle with this script: http://jsfiddle.net/dvir_azulay/Pjqv2/4/
Change (this) to $(span). I updated your fiddle to reflect this change.

Categories