Getting all checkboxes that have been checked and then looping through them - javascript

Ok, I have a situation where I have a page which has checkboxes on it next to items with input text fields.
I have a button at the top with the same fields of which the user can use to apply the settings to all the fields in the page that have been selected with their respective checkbox.
I'm trying to work out how to get all the checkboxes in the page that have been checked an then loop through them so I can possibly grab the ID for that row and then update the respective items, but I'm not 100% sure how to do this.
Each of the checkboxes on the page have the same class name, so I thought something like this would work..
var selected = $('input:checked', '.discount_select');
But it doesn't appear to work.
Here is a example checkbox and it's corresponding text box..
<input type="text" size="4" name="discount[101129]">
<input type="checkbox" value="1" class="discount_select" name="select[101129]">
So basically I wanna loop through the found selectec checkboxes, hopefully be able to pull out the id 101129 somehow and then be able to update the textbox with that same id.
JsFiddle: http://jsfiddle.net/79udU/

This should work:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val(this.name);
});
});
Demo: http://jsfiddle.net/79udU/1/
Edit: To actually apply the value from the top input, use this:
$('#apply_selected').click(function() {
$('.discount_select:checked').each(function() {
$(this).prev("input").val($("#apply_discount").val());
});
});
Demo: http://jsfiddle.net/79udU/2/

you need
var selected = $('input.discount_select:checked' );

Related

How can I retrieve a value in jquery with a button click?

I have the following code:
jQuery
$(document).ready(function(){
$('input[name="new_tax_button_post_tag"]').click(function(){
value = $('input[name="post_tag"]').val();
$("#fieldID3").val(value);
});
});
and I want it change:
HTML
<input type="text" id="fieldID3" name="changeme"value="n/a">
The problem is that the click itself is what creates the value, so I have to click the button twice to get the desired results. The first click creates the value. The second click sets the value in the field.
How do I make it so that it does it in one click?
It's like which came first the chicken or the egg.....
I write jquery on the basis of ID of button and textbox,
and also remove value from following input field,
<input type="text" id="fieldID3" name="changeme">
$(document).ready(function(){
$("#new_tax_button_post_tag").click(function(){
value = $("#post_tag").val();
$("#fieldID3").val(value);
});
});
I hope this useful for you.

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

Get value of text box using based on radio button selection jQuery

I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code
Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working
you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle
I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.
You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!

Assign value to textbox

Hi i have a radio button(StarRating radiobutton using jquery) and a textbox. When i click on the star, i would like the radiobutton value to display to the textbox.
<input id="InsRating1" class="star" type="radio" name="InsRating" value="1" title="Worst"/>
<input id="InsRating2" class="star" type="radio" name="InsRating" value="2" title="Good"/>
I tried put the Onclick() in the but onClick() has never get fired.
Please advice how to get the value from my radiobutton to textbox. Thanks
I tried this below, but the value is "Undefined"
$(document).ready(function() {
$('#InsRating1').click(function() {
alert(this.value)
});
});
-------------Edit----------
I am using g_thom's answer below but come to this problem :
I have 3 set of stars with 3 textboxes. Each rating should show to only 1 textbox.
However whenever any star is clicked, it shows the value to all 3 textboxes instead of just specified one. Please advice. Thanks
<script type="text/javascript">
$(function() {
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationInstructorRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationInstructorRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationMaterialRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationMaterialRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationValueRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationValueRatingTextBox').val('0');
});
});
Since the inputs are converted to divs (with the 'rated stars' being assigned a different class), I think you'll want to count the number of divs with the .star-rating-on class and assign that value to the input, like this:
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#ratingText').val($('.star-rating-on').length);
});
Boring looking example - without the actual graphics/animations (just the HTML from the transformed inputs on plugin page - the value will always be 4): http://jsfiddle.net/bhf2d/
EDIT
The code above should work. I think you may be thinking that you need to apply your jQuery to the radio button, but that's not the case, since it is swapped out on page load with a div. Just in case you're not clear, I've added a live example using the code you provided in your question: Click here to see it.
EDIT 2
See an updated version here, matching the additional requirement to set multiple checkboxes. The textboxes have been renamed slightly (InsRatingText0 etc) to facilitate easily adding more items. The name convention InsRatingText[n] is set that way to match the div classes the plugin adds dynamically ('rater-0', 'rater-1', etc)
These <input> elements are not clicked, since they are hidden and replaced by <div> elements. You should use onChange() events instead.
Also, radio button do not use the property value, but checked.
Try something like this
$(function (){
$(".star").click(function(){
$("#textbox1").val($(this).val());
});
});
Basically, it is adding a handler for onclick to the eloement with class ="star" and then copying that value to the textbox.
$(".star").bind('click', function() {
$("#ratingValue").val($(this).text())
});
Seems like getting the val() on the checkbox didn't work, but using text() gives the value. Here is the example working: jsfiddle

Multiple checkbox scripts intervene with each other

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.

Categories