I have a simple script to count all of the .checkboxes that have been checked. When they each are checked individually the count works just fine, but when I select the .checkall checkbox, it doesn't count. I did try changing the $checkboxes variable to input[type=checkbox] which counted incorrectly.
jsfiddle - http://jsfiddle.net/darcyvoutt/rv4j8ghn/
Code:
// Select all checkboxes
$(document).ready(function() {
$('.checkall').click(function(event) {
if (this.checked) {
$('.checkboxes').each(function() {
this.checked = true;
});
} else {
$('.checkboxes').each(function() {
this.checked = false;
});
}
});
});
// Count Checkboxes
$(document).ready(function(){
var $checkboxes = $('.checkboxes');
var checkall = $('.checkall:checked');
$checkboxes.change(function(){
var count = $checkboxes.filter(':checked').length;
$('.counted').val(count);
});
});
$(document).ready(function () {
$('.checkall').click(function (event) {
$('.checkboxes').prop('checked', this.checked);
var $checkboxes = $('.checkboxes');
var count = $checkboxes.filter(':checked').length;
$('.counted').val(count);
});
});
You have to add checkbox checked count code inside checkall click event.
Demo:
http://jsfiddle.net/h7zprokf/2/
Related
Hi I am developing one jquery application where I have one choosen dropdownlistbox and gridview. The first column of gridview contains checkboxes and at the top it also contains check all button. For example if I check 3 rows inside the gridview then corresponding values in dropdownlistbox i need to disable. I am trying as below.
This is the code to get all the cheked values from gridview.
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true))
{
checkedValues += $(this).val();
}
});
Once i get values in array and when i go to dropdown i have below code.
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
//if (this.value == checkedValues) If this.value is equal to any value from checkedValues then i want to hide that value inside dropdownlistbox.
// Here i want to hide all values of checkedValues array(values will be same in dropdownlistbox)
});
});
I tried as below.
$('.limitedNumbSelect').change(function (e) {
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if ($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true)) {
checkedValues.push($(this).closest('tr').find('td:eq(2)').text().trim());
}
});
$(".limitedNumbSelect > option").each(function () {
var val = $(this).val();
alert(val);
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
In above code there is one bug. For example if i select one value from gridview then if i click on dropdown i am able to select that value(on first click). On second click required value will hide.
Above code does not work. Array checkedValues doesnt catch values.
I am unable to figure out what to write inside. Any help would be appreciated. Thank you.
Try something like this:
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
});
});
Replace the line:
checkedValues += $(this).val();
In this line:
checkedValues.push($(this).val());
I am trying to get the values into an array [111, 123, 678, and so on....] basically if click parent check the values or children inputs and an output as array[], same way if checkbox is selected on its own:
I am getting a good understanding of JS but still struggling with it.
I have a jsfiddle http://jsfiddle.net/4ofugqvo/ and this is how the js looks like:
$(document).ready(function(){
$('#sidebar').append(dropdown_theatre(events.level_0));
function checkboxGroup() {
$('#sidebarNav input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
console.log(checkboxes);
//[10101, 191919, 19191, 119191]
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
//console.log(this);
});
};
});
} checkboxGroup();
I forked the fiddle. http://jsfiddle.net/0g1hk7mt/
I am not quite sure it's what you're after. The array of values is available at the alert in the on change event.
var arr = [];
function checkboxGroup() {
$('#sidebarNav input[type="checkbox"]').on('change', function(){
arr = [];
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
//console.log(checkboxes);
//[10101, 191919, 19191, 119191]
if ($(this)[0].checked == true) {
checkboxes.each(function(){
arr.push($(this).attr("id"));
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
//console.log(this);
});
};
alert(arr);
});
}
checkboxGroup()
Trying to disable a form submit button unless a selection has been made from a number of radio button groups. Have got this far, cant see why not working, button stays disabled:
<script>
$(function () {
$('#button').attr('disabled', true);
var disable = true;
$('input:radio').click(function () {
$('input:radio').each(function () {
if ($(this).is(':checked'))
disable = false;
else
disable = true;
});
});
$('#button').prop('disabled', disable == true ? true : false);
});
</script>
You should probably change the property inside the handler, and the right handler for a radio button would be onchange
$(function () {
var button = $('#button').prop('disabled', true);
var radios = $('input[type="radio"]');
var arr = $.map(radios, function(el) {
return el.name;
});
var groups = $.grep(arr, function(v, k){
return $.inArray(v ,arr) === k;
}).length;
radios.on('change', function () {
button.prop('disabled', radios.filter(':checked').length < groups);
});
});
FIDDLE
I found this answer which does part of what I want to do, uncheck checkboxes when people go past a certain limit.
Now I want to modify it so that the values of the checkboxes are added to and removed from a string as the checkboxes are checked/unchecked.
My updated code looks like this:
var filterURL = '';
var checked = [],
$check = $('.accordion-list input').change(function() {
checked.push(this);
checked = $(checked);
checked.prop('checked', false).slice(-6).prop('checked', true);
if($(this).is(':checked')) {
filterURL += ($(this).val());
}
else {
filterURL = filterURL.replace($(this).val(),'');
}
alert(filterURL);
});
This works fine until I start to try and uncheck checkboxes – they don't uncheck and the value keeps getting appended to the string.
Working demo
$('.checkboxes input').change(function() {
var filterURL = $('.checkboxes input:checked').map(function(){
return $(this).val();
}).get().join('');
$('#output').html(filterURL);
});
var vals = [];
$('input:checkbox:checked').each(function() { vals.push($(this).val()); });
On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.
Here's a Fiddle for the issue:
http://jsfiddle.net/Gz668/13/
On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.)
Here's the jquery code
$("#edireq")
.button()
.click(function () {
var ele = document.getElementsByName('reqradio');
var len = ele.length;
var flag = -1;
for (var j = 0; j < len; j++) {
if (ele[j].checked) {
flag = j;
}
}
if (flag > -1) {
alert("Row : " + (flag + 1));
} else {
alert("Select a row first");
}
});
Thanks.
You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
});
$("#edireq").button().click(function () {
var $ele = $('input[name="reqradio"]:checked');
if ($ele.length) {
var $tds = $ele.closest('tr').find('td');
var id = $tds.eq(1).text();
var requestor = $tds.eq(2).text();
// and so on..
alert(id);
alert(requestor);
}
else {
alert("Select a row first");
}
});
});
Example fiddle
Try this:
var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {
$(".active").find("td:gt(0)").each(function(i){
console.log(list[i]+": "+$(this).text());
});
}
Fiddle here.
I came up with the following:
http://jsfiddle.net/Gz668/16/
$(document).ready(function () {
$("table").on("click", "tr", function(){
$(".active").removeClass("active");
$(this).toggleClass("active");
$(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
activeRow=$(".active");
cells=activeRow.children();
if(cells.length >0){
row={
select:cells[0],
requestId:cells[1],
requestor:cells[2],
approver:cells[3],
status:cells[4],
product:cells[5],
version:cells[5],
source:cells[6],
destination:cells[7]
};
alert(row.requestor.textContent);
}
})
});