I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later)
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0032" >
<p>10€</p>
</td>
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0033" >
<p>7€</p>
</td>
For the input tag I was thinking of putting an onclick event on the td like:
onclick="checked()==true;"
Also I was thinking an onclick for the and send it to a .js with a function to switch the radio button to true.
When the button is clicked the radio button doesn't toggle to true. How do I make it do that?
Any advice would help greatly, thanks in advance!
Here is an example : http://jsfiddle.net/xhhLja7m/
$(".choice-option").click(function()
{
$(this).find('input[type=radio]').prop("checked", "true");
})
The radio button isn't necessarily required to achieve this. You might apply a class name (e.g. 'selected') to a td when it is clicked and remove this class from all td's at the same time. In this way you get the effect of one td being selected at any time. In jQuery:
$('.choice-option').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
Where you will apply your selected styles with CSS to the class of 'selected'.
Edit: However, to use the radio buttons as you would like to then you could do this:
$('.choice-option').click(function() {
$(this).find("input[name='trainChoice']").prop('checked', true);
}
Related
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!
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();
So this is the dumbest thing I've struggled with in awhile. I cannot get the state of a simple radio button set to toggle something on the page.
<label for="completeSw"><span>Completed?</span></label>
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes
<input type="radio" id="completeSw" name="completeSw" value="0" checked="checked"/>No<br/>
So you can see here an extremely simple yes/no radio button set to toggle an action. It needs to serve two purposes: to flag a yes/no value (1/0) in the POST data, and ideally trigger an action on the page using JS/jQuery. I'm having trouble with the latter.
The default state is "No"; if I click "Yes" I can retrieve an onchange or onclick event state and make something happen. However, this is a one-way switch; I cannot retrieve a state going back to the "No" selector once I've gone to "Yes". What I need to be able to do is show / hide an element on the page depending on what choice they've made in this radio set. If I click "Yes", I can trigger the action and see the page change. Once I click "No", however, it acts as if there was no state change and I cannot perform an action i.e. hide the element again.
I've tried variations on retrieving the "checked" state, the radio pair value, etc, e.g.
$("#completeSw").change(function(e){
alert( $(this).attr("checked") ); // only triggers when "Yes" is selected
});
Perhaps I should not be using a yes/no radio pair, but instead be using a single checkbox? Seems more user-friendly and elegant this way (radio buttons) to me.
IDs must be unique, so it will only ever find the first one on your page. Use a class instead.
Really, ID's must be unique, but you don't need 2 ID's. You'll only monitor changes in one radio. For example - "Yes" value
<label for="completeSw"><span>Completed?</span></label>
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes
<input type="radio" name="completeSw" value="0" checked="checked"/>No<br/>
And the you'll process the checked attribute of only this element. True - "Yes", False - "No"
Some browsers don't do anything when alert(message), message=null. And since an unchecked field has no checked-attribute, that could be the thing :).
Try:
alert('Checked: '+$(this).attr("checked"));
This is separate, but you're kinda using the label wrong also. The label is meant to extend the click area so someone could click on the word 'Yes' and the radio button will activate. Hopefully this helps you out a little.
<span>Completed?</span>
<input type="radio" id="completeSwYes" name="completeSw" value="1"/><label for="completeSwYes">Yes</label>
<input type="radio" id="completeSwNo" name="completeSw" value="0" checked="checked"/><label for="completeSwNo">No</label><br/>
<script type="text/javascript" charset="utf-8">
// If the radio button value is one then this evaluates to true.
var completeSW;
jQuery("input[type='radio'][name='completeSw']").change(function() {
completeSW = (jQuery(this).val() == 1);
alert("completeSW checked? " + completeSW);
});
</script>
I'm trying to add a class to the selected radio input
and then remove that class when another radio of the same type is selected
The radio buttons have the class 'radio_button' but i can't get
the class to change with the below code.
jQuery(".radio_button").livequery('click',function() {
$('input.radio_button :radio').focus(updateSelectedStyle);
$('input.radio_button :radio').blur(updateSelectedStyle);
$('input.radio_button :radio').change(updateSelectedStyle);
}
function updateSelectedStyle() {
$('input.radio_button :radio').removeClass('focused');
$('input.radio_button :radio:checked').addClass('focused');
}
Tre problem is caused by one extra space in your selectors.
Instead of:
$('input.radio_button :radio')
you wanted to write:
$('input.radio_button:radio')
You might also want to take advantage of jQuery's chainability to reduce the amount of work you're doing. (Rather than re-finding these buttons over and over again.) Something like this:
jQuery(".radio_button").livequery('click',function() {
$('input.radio_button:radio')
.focus(updateSelectedStyle)
.blur(updateSelectedStyle)
.change(updateSelectedStyle);
});
function updateSelectedStyle() {
$('input.radio_button:radio')
.removeClass('focused')
.filter(':checked').addClass('focused');
}
Give each radio button a unique ID
Pass the ID on the click
Remove the "focussed" class name for all the radio buttons with the same class
Add the "focussed" class to the radio button with the ID you passed
First, I agree with Rene Saarsoo's answer about the extra space.
Second, are you also trying to apply the style to the radio button label? You probably want to wrap the buttons and labels together somehow. For example:
<span class="radiowrapper"><input type="radio" name="system" value="1" class="radio_button"> 1</span>
<br>
<span class="radiowrapper"><input type="radio" name="system" value="2" class="radio_button"> 2</span>
Then get rid of the extra calls in your livequery call and move the code from updateSelectedStyle() function into your livequery call (I noticed issues with IE otherwise):
jQuery(".radio_button").livequery('click',function() {
$('input.radio_button:radio').parent(".radiowrapper").removeClass('focused');
$('input.radio_button:radio:checked').parent(".radiowrapper").addClass('focused');
});