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);
Related
I am trying to hide a div class field using j query and i am unable to do so. It is a ticket field in a support form. That needs to be hidden at the beginning and reflect when a particular value is selected. I does not work. I have tried it two different ways and it does not work. Below is the HTML Code, HTML Image and the JQuery Code that i have used.
HTML:
<div class="form-field string optional request_custom_fields_21158635">
<label for="request_custom_fields_21158635">iOS Plugin Details</label>
<input id="request_custom_fields_21158635" type="text" name="request[custom_fields][21158635]">
<p>Please provide the iOS Plugin version details for your request. Example: iOS GA5.0.38</p>
</div>
J Query Code: One Hides only field and label remains visible.
var iosPluginId = "21158635";
$(document).ready(function() {
if(cust_tags == "kony_internal") {
$('#request_custom_fields_'+iosPluginId).hide();
}
});
JQuery Code: Two Both the label and field are visible.
$(".form-field string optional request_custom_fields_21158635").hide();
you can try below code. It will work.
$('#request_custom_fields_'+iosPluginId).hide();
change this to below code.
you cannot use # for class. You have to use "." for class and "#" for id.
$('.request_custom_fields_'+iosPluginId).hide();
You are using multiple selectors, if you can use them together like
$(".form-field.string.optional.request_custom_fields_21158635").hide();
it will be intersection, it means select element which have all of the classes. Or if you want a union, you can use
$(".form-field, .string.optional, .request_custom_fields_21158635").hide();
which means select element which have atleast one class
Related question : How can I select an element with multiple classes?
Fiddle
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' );
I'm looking for a way to modify a page like this>
http://speckyboy.com/demo/digg-style-radio-buttons/index.html
so users can highlight one selection per row, IOW 8 radio button groups using a comparable visual style, not the traditional looking radio button controls.
I've tried nearly all the suggestions in stackoverflow I could find for handling radio button groups the last few days, but I clearly don't know enough js to adapt those suggestions properly. Can anyone help?
Can't you use the same id for all the radio buttons so that they work as a single entity? Then you can place them wherever you like.
You should use class(not ID, id must be unique on the page).
1 You can get all radio buttons
$('.class')
2 Now you can use each More details here http://api.jquery.com/each/
$('.class').each(function(index) {
// Add to element
});
3 To add you can with
http://api.jquery.com/add/
http://api.jquery.com/appendTo/
http://api.jquery.com/append/
http://api.jquery.com/html/
Just use a class for your elements - not sure if you were using radio buttons in the background or not like the example you posted
Minimized html
<div id='group1' class='radio'>
Group 1
<input type='radio' name='test'/>
</div>
<div class='row'>
<a href='#' class='c'>group 1a</a>
</div>
jQuery
$('.row a').click(function(e){
e.preventDefault();
var $this = $(this);
$this.addClass('sel') // add class to currently clicked anchor
.siblings() // get siblings
.removeClass('sel'); // remove class from siblings
$('.radio').eq($('.row').index($this.parent())) // <-- get row of radios equal to this row
.find('input[type=radio]') // find the inputs radios under this
.eq($this.index()) // get radio with same index as clicked anchor
.click(); // trigger click
});
http://jsfiddle.net/Lupw9/
I'm producing a page dynamically and I have several sets of radio buttons. I need to use the record id in the id tag of the radio buttons. e.g.
<input type="radio" name="review_flag1797" id="review_flag1797"
value="n" checked="checked" />
How can I produce a single JQuery function to handle showing / hiding of my div. My radio buttons will have three values y, n and r. When the value is n I need to hide my div and show it for y and r.
To further complicate this, the radio of the radio button can set to a different value when its written.
EDIT
<div id="my_content1797">
content
</div>
I suggest you use a data-* attribute to store the ID of the set, just to make life a bit easier, maybe also give those radio buttons a common class:
<input ... class="someClass" ... data-id="1797" ... />
Then all you have to do is:
$('.someClass').change(function() {
if(this.checked) {
$('#my_content' + $(this).data('id')).toggle(this.value !== 'n');
}
});
I believe you want the jQuery toggle() method.
http://api.jquery.com/toggle/
onclick="$('#my_content<%=record_id%>').toggle(this.checked);"
You can hide the parent div using this statement
$("input[value='n']").parent().hide();
To show, give
$("input[value!='n']").parent().show();
You have to give this after the statements that add radio buttons dynamically, and also in the change handler of radio inputs. You can put these statements in a function and invoke it.
Also try http://api.jquery.com/closest/ if the div is not parent. This also selects parent.
$("input[value='n']").closest(...).hide();
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.