We Keep Coding

Limit number of checkboxes and update string based on their value

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()); });

Javascript/JQuery iterate through table rows and cells and output an attr of checked checkboxes to console

I have the following code, which should go through each table row and dump my array which is declared in an earlier segment of javascript. Then if the checkbox is checked, and it has an attr of "changed=yes" then it should be pushed onto the array and the value should be outputted in console as well as the "path" attribute which should be outputted as a variable that can be overwritten every time the function finds a new checkbox that is checked and changed. So what is wrong with my code? These functions are contained in a function that is called when the user clicks submit on the form.
JsFiddle: http://jsfiddle.net/hU89p/392/
$('#myTable1 tr').each(function(){
myArray = [];
$.each($("input[type='checkbox']:checked").closest("td").siblings("td"),
function () {
if($(this).data("changed") == 'yes'){
myArray.push($(this).attr('checkboxtype'));
filepath = $(this).attr('path');
console.log(myArray);
console.log(filepath);
}
});
});

Here is the Working Fiddle :
Keep it simple :
$('#myTable1 tr').each(function() {
var columns = $(this).find('td');
columns.each(function() {
var box = $(this).find('input:checkbox');
if(box.is(":checked") && box.attr("changed") == 'yes')
{
myArray.push(box.attr('checkboxtype'));
filepath = box.attr('path');
}
});
});
console.log(myArray);
});

You should be using $("input[type='checkbox']:checked").closest("td").siblings("td").each().
See the difference between $().each() and $.each().

try this :-
$('#myTable1 tr').each(function () {
myArray = [];
$(this).find("td input:checkbox").each(function () {
if ($(this).is(":checked") && $(this).attr("changed") == 'yes') {
myArray.push($(this).attr('checkboxtype'));
filepath = $(this).attr('path');
console.log(myArray);
console.log(filepath);
}
});
});

Accessing elements of a table row on the basis of checked radio button

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);
}
})
});

JavaScript/jQuery: Select on change event not firing

I have this problem trying to getting one single function attach multiple individual functions on "Change" event of a dropdown list using for ... in loop. The $('select') object top has no method 'on' is the Type error detected by Chrome Debugger.
Here is my code: (I don't have much JavaScript / jQuery knowledge so please be bear up with my coding)
function AKaizerDropdown(HiddenFeild) { //#id of hidden field passed as parameter
var select = $('select'); // select object assigned to variable
var selectcount = 0;
var Selecthold=new Array();
for (select in this) {
select.on('change', function() {
var SelectedIndex = this.attr('selectedIndex');
selecthold[selectcount] = [select.attr('id'), selectedindex];
//Select ID and Selected index assigned as an array into Selecthold Array element
});
selectcount +=1;
}
var item= new array();
//Elements in selecthold array printed onto hidden field
for (item in selecthold) {
$(HiddenFeild).val += item[0] + item[1]; //Assigns values to element Hiddenfield in DOM
}
}
Edited Code :
$.fn.AKaizerDropdown = function (HiddenFeild) {
var select_ = $(this).find('select');
var selectcount = 0;
var Selecthold=new Array();
select_.each(function () {
$(this).on('change', function () { //everything runs fine except dropdownlist doesn't enter into this event when an item is chosen
var SelectedIndex = this.selectedIndex;
Selecthold[selectcount] = [this.id, Selectedindex];
});
});
var button_ = $(this).find('input')
button_.on('click', function () {
for (item in Selecthold) {
$(HiddenFeild).val += item[0] + item[1]+','; //Assigns values to element Hiddenfeild in DOM seperated by ","
}
});
}
Somewhat fixed code still doesn't work
Here is the part where i attach it to popover Bootstrap(twitter 2.3.2) .
//think the problem lies here where the pop up seems to re-render the same same html found in ($#KaizerDragon") where all JavaScript is probably discarded?
$("#ContentPlaceHolder1_ADragonTreeviewt41").popover({
html: true, container: 'body',
trigger: 'click',
content: function () {
$(function () {
$("#KaizerDragon").AKaizerDropdown();
});
return $("#KaizerDragon").html();
}
});
So my question is how can I correct the above code to get the intended output(as in comments within code) ?

You are declaring
var select = $('select'); // select object assigned to variable
But then overriding the value in your for loop
for (select in this) ...
That is to say, the select inside the loop isn't the same as you declared above.

try something like this
select.each(function(){
$(this).on('change', function() {
var SelectedIndex = this.selectedIndex;
Selecthold[selectcount] = [this.id, SelectedIndex];
//Select ID and Selected index assigned as an array into Selecthold Array element
});
})

javascript not seeing first click?

I have a table that the user can select certain rows by checkboxes. I have some javascript that let's them select each checkbox and Select All. I also have some javascript written to let the user check a box then shift-click another checkbox and all the boxes between should become checked.
All this is working the only problem is that the first checkbox isn't being recognized. Thus when the user holds shift and selects another checkbox, only that checkbox is checked. But if the user holds shift and selects a third checkbox, THEN all the boxes between the 2nd and 3rd become checked.
Javascript
$(document).ready(function () {
$(this).click(function () {
//shift-click checkboxes
var lastChecked = null;
var handleChecked = function (e) {
//alert(lastChecked);
if (lastChecked && e.shiftKey) {
var i = $('input[type="checkbox"]').index(lastChecked);
var j = $('input[type="checkbox"]').index(e.target);
var checkboxes = [];
if (j > i) {
checkboxes = $('input[type="checkbox"]:gt(' + (i - 1) + '):lt(' + (j - i) + ')');
} else {
checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
}
if (!$(e.target).is(':checked')) {
$(checkboxes).removeAttr('checked');
} else {
$(checkboxes).attr('checked', 'checked');
}
}
lastChecked = e.target;
} //handleChecked
$('input[type=checkbox]').click(handleChecked);
}); //$(this).click(function())
//select all checkboxes
$('#selectall').click(function (i, v) {
$('.selectedId').prop('checked', this.checked);
});
var checkCount = $('.selectedId').length;
$('.selectedId').click(function (i, v) {
$('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
});
}); //ready function
I made a fiddle that replicates the problem.
http://jsfiddle.net/tihg7947/JXnNK/
To replicate my issue, check a box (other than Select All) and then hold shift and select another box.
I'm new to web design and have no idea how to diagnose this issue (event handling?).
I would appreciate any help or guidance.

You are binding $('input[type=checkbox]') inside $(this).click(function () { function thus its not working first time
You bind event inside $(document).ready(function () {
As my understanding remove $(this).click(function () {
Fiddle Demo

You install the handleChecked listener from within $(this).click(function () {. This means that:
The event handler is not installed until the user clicks once.
Multiple copies of the event handler will be installed.
I think you want to just set the event handler once inside $(document).ready(function () {.
So, just delete the lines
$(this).click(function () {
and
}); //$(this).click(function())