Multiple checkbox scripts intervene with each other - javascript

a nice member here helped me set up a multiple checkbox example that stores the data to be shown in a div. However, when I try to do multiple of these, they interlap with each other and show the same data in the divs even when I changed variables.
I set up a simple example here:
http://jsfiddle.net/pufamuf/vrpMc/4/
Thank you for your time everyone :)

That's because you're using the same selector in both event handlers: input[type="checkbox"]:checked
This will select all checked checkbox inputs in the page.
You should instead use input[name="car[]"]:checked and input[name="phone[]"]:checked
to select only the inputs with the given name, each time.

In both your functions, you're selecting all of the selected checkboxes. My fix (and someone else might have a better one) would be to add unique ids to the ul's surrounding the li's.
html:
<ul id='electronics'>
<li><input type="checkbox" name="phone[]" value="Nokia" />Nokia</li>
That way you can modify your $('#submit').click handler to something like this:
$('#submit').click(
function()
{
var htmls = "";
$('ul#electronics>li>input[type="checkbox"]:checked').each(
function()
{
htmls += $(this).val() + " ";
}
);
$('.here').html(htmls);
}
);
Check out http://api.jquery.com/child-selector/, http://api.jquery.com/id-selector/ for more info.
Basically, without this or a similar change, there's nothing distinguishing your list of car brands from your list of electronics brands, and your click handlers both consider all of the checked checkboxes.

Related

Jquery get Checkbox in span

I have some jquery code where I am trying to select a checkbox when the user clicks on a div. My fiddle is below:
http://jsfiddle.net/5PpsJ/
What i have come up with is this, but it is not selecting the checkbox inside of the span:
$('span[name="' + current + '"]').closest('input:checkbox[id="CB_Selected"]').prop('checked', true);
The full code is in the link
My question is how can i get the select box inside of the span based on its unique name and select it?
n.b I have commented out the hide functio0n in jquery to visually see whether the checkbox is selected or not
EDIT
My ID's are the same because I am working inside of ASP.NET and using a repeater to create the HTML shown in the fiddle. Inside of Repeaters I can not set the ID of item as the Repeater control does not allow me to set the ID with Eval(datasource)
IDs are unique. All you need is this:
$("#CB_Selected").prop('checked', true);
Actually, you don't even need jQuery:
document.getElementByID('CB_Selected').checked = true;
As others have pointed out, it would be preferred to use a class rather than an ID if there are multiple checkboxes. In addition, an input cannot have children, so the closest function won't work; did you mean find (for children) or siblings?
Instead of giving several checkboxes the same ID -- which invalidates your html -- use a class on the checkboxes. Change:
<input id="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
To:
<input class="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
Then you can use the code:
$('#s_' + this.id).find(':checkbox.CB_Selected').prop('checked', true);

How can I change my script to output ul rather than select option?

Here is the JS Fiddle I am referencing:
http://jsfiddle.net/fiddleyetu/wKbXx/1/
What I would like to ultimately do is modify this to create an array of items associated with a parent category that is dynamically generated. So… for this example, if a user selects:
<li class="list"><input type="checkbox" name="q1" value="Kitchen"/> Kitchen</li>
Then they would get a list of items associated with the Kitchen in a list:
<ul>
<li>Cup</li>
<li>Spoon</li>
<li>Wine</li>
<li>Salsa</li>
<li>Oven</li>
</ul>
In the JS Fiddle it looks like I am headed in the right direction with the dynamic population of elements upon a user click, but it turns it into a select dropdown. Any suggestion on how I can make this happen? FYI, the associated items will be pulled from a database array.
Changing the select to ul is what you're trying to achieve. I tried to simplify and make it to look consistent like add/remove the exact element based on the checkbox.
$('input[name=q1]').on('change', function () {
var valu = this.value;
if (this.checked) {
$('#q2').append("<li>" + valu + "</li>");
$('#question2').show();
} else {
var lis = $("#q2").find('li');
lis.each(function () {
if ($(this).text() === valu) {
$(this).remove();
}
});
if (lis.length === 0) {
$('#question2').hide();
}
}
});
JSFiddle
In your code you are generating <option> elements and appending them to a <select>. This will create a drop-down menu.
If you want it to output a list with checkboxes... then you just need to change the HTML that you are inserting in the page.
http://jsfiddle.net/wKbXx/5/
Here I changed it so that instead of a <select> under question 2, there is a <ul>, and the jquery code generates and inserts <li> elements dynamically as you select items in question 1. Is this what you want? Compare this to your original code and you'll see it's basically the same, but with <li> instead of <option>.
EDIT:
http://jsfiddle.net/wKbXx/6/
Here is a version with a radio button selection instead of checkbox selection.

change name of dynamically added select option element

I am dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});
You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});
I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});

Getting length of toggle classes

This might be similar to getting length of a class. But I am not getting the actual output for toggle class.
So here is the scenario: I have a table in which there is a checkbox in every row. If check all option is selected, all checkbox is marked. Now the problem is that I want to pass flag as true when all checkbox are checked and false when only some checkboxes are checked. Now I use toggling functionality. So I don't know how I get length of 'unchecked' checkboxes rather than 'unchecked checked' checkboxes.(I am using Div's for styling instead of checkboxes. )
Here is the jsfiddle
Script for counting length:
$("#cntCheck").click(function(){
alert($('.isChecked').length); //Counting Checked CheckBox(Working right).
});
$("#cntUncheck").click(function(){
alert($('.checkBox isChecked').length); //Counting Unchecked CheckBox Except CheckAll checkbox(This is not working)
});
If I understand your (very confusing) question correctly, you're asking how to count the elements that do have the checkBox class but don't have the isChecked class. If so, you can use the .not() method:
$(".checkBox").not(".isChecked").length
Or, the :not() selector:
$(".checkBox:not(.isChecked)").length
Regarding your styling:
"I am using Div's for styling instead of checkboxes."
I would strongly recommend against doing this, because users who don't like to (or are physically unable to) use a mouse or other pointing device can't click your pseudo-checkboxes.
See this fiddle - http://jsfiddle.net/Yp56c/3/
$("#cntUncheck").click(function(){
var notChecked = $('.checkBox').not('.isChecked').length;
alert(notChecked); //This is working
});

multiple set of check box?

im having a set of multiple check bxes, like one set contain 3 check box share same name another set contain 3 check sharing same name . how can i get the value of these two different set of check box using a single code .
var form = $('usersurvey');
checkboxes = form.getInputs('checkbox');
for(count=0; count< checkboxes.length; count++){
if(checkboxes[count].checked){
retValue=true;
break;
}
}
return retValue;
}
im tried with this code but it fetch all the check boxes , i want only that have the same name, i used prototype.js
if you give each set of checkboxes a different class you could select them using jquery like:
$(".className").each(function(index, element) { ... });
for instance. somebody may be able to improve on this solution by selecting by name (i wasnt sure if you could do that, i always just select by class).
EDIT: sorry i should elaborate probably. the $(".className") piece will select all the checkboxes of class 'className'. since it sounds like you want to DO something with each of them though, i just added the each call on the end. inside the each call, you can define a function (shown) that will do something for each checkbox that was selected. reference the jquery each docs here:
http://api.jquery.com/each/

Categories