I would like to be able to select a radio button when clicking on "label" and then pass that value to the URL.
Here's the URL Prefill code below.
It works if you select the actual radio button. However, I realized that if you click on label it doesn't select the radio button.
So i added this top part jquery code to solve that issue. However, it doesn't pass the value to the URL.
I'd like to stylize radio buttons by hiding input part and adding pseudoclasses. so i wonder if there's a way to pass radio button value when label is clicked on?
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="radio"><input type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
First of all, we don't need JQuery code for select the radio button when clicking the label. Instead of this you can able to use below code,
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
For achieving this, Need to set the ID attribute in textbox and use that ID attribute value on label 'for' attribute.
Below, I have added a full code. Hope this will help.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li>
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
</li>
<li>
<label for="double">
<input type='radio' name='product-choice' value='double' id="double" /> double
</label>
</li>
<li>
<label for="xl">
<input type='radio' name='product-choice' value='max-xl' id="xl" /> xl
</label>
</li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href='javascript:void(0)'>Click to continue</a>
</section>
</main>
</form>
<script type="text/javascript">
$("#action-link").click(function(){
var getVal = $('input[name=product-choice]:checked').val();
window.location.href='https://example.com/test.cfm?product-choice='+getVal;
});
</script>
On the label, associate the for attribute with a corresponding id on each of the radio buttons. The ids should be unique between them.
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="regular"><input id="regular" type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="double"><input id="double" type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="max"><input id="max" type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
Related
I'm using this code that I found online, but it's not working completely the way I want it to.
Basically I am wanting check boxes to hide divs based on the users selection.
I am building an allergens advice page for a restaurant. When a guest selects the allergens they have I want it to hide the dishes that they cannot have.
The above code works perfectly if the guest has one allergen. It hides the div. If they select more than one then the box will reappear.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.
</div>
<ul>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
</ul>
I'm guessing it's doing it because the code is toggling, but I don't know of any other code to prevent that.
Your help would be greatly appreciated.
I just copied further code from the link
What is happening here is just checkbox from ks-cboxtags class will be affected so any other checkbox will not have this functionality.
when you click on this it will displays div and if its selected div will be hide.
check below snippet for more details.
$(document).ready(function() {
$(".test").click("test"); //ignore this
$(".ks-cboxtags input").click(function() {
$("."+$(this).val()).show();
$(".ks-cboxtags input:checked").each(function() {
$("."+$(this).val()).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main class="inline-block-center">
<div class="selectt Gluten" style="display: block;">
<strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero & pepper salsa, green tomatillo & jalapeño salsa.</div>
<div class="selectt Eggs Gluten" style="display: block;">
<strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div>
<div class="selectt Gluten" style="display: block;">
<strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div>
<div class="selectt Milk Gluten" style="display: block;">
<strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div>
</main>
<ul class="ks-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Gluten">
<label for="checkboxOne"> Gulten</label>
</li>
<li>
<input type="checkbox" id="checkboxTwo" value="Crustaceans">
<label for="checkboxTwo"> Crustaceans</label>
</li>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkboxFour" value="Fish">
<label for="checkboxFour"> Fish</label>
</li>
<li>
<input type="checkbox" id="checkboxFive" value="Peanuts">
<label for="checkboxFive"> Peanuts</label>
</li>
<li>
<input type="checkbox" id="checkboxSix" value="Soy Beans">
<label for="checkboxSix"> Soy Beans</label>
</li>
<li>
<input type="checkbox" id="checkboxSeven" value="Milk">
<label for="checkboxSeven"> Milk</label>
</li>
<li>
<input type="checkbox" id="checkboxEight" value="Tree Nuts">
<label for="checkboxEight"> Tree Nuts</label>
</li>
<li>
<input type="checkbox" id="checkboxNine" value="Celery">
<label for="checkboxNine"> Celery</label>
</li>
<li>
<input type="checkbox" id="checkboxTen" value="Mustard">
<label for="checkboxTen"> Mustard</label>
</li>
<li>
<input type="checkbox" id="checkboxEleven" value="Seasame">
<label for="checkboxEleven"> Seasame</label>
</li>
<li>
<input type="checkbox" id="checkboxTweleve" value="Sulphur">
<label for="checkboxTweleve"> Sulphur</label>
</li>
<li>
<input type="checkbox" id="checkboxThirteen" value="Lupin">
<label for="checkboxThirteen"> Lupin</label>
</li>
</ul>
Your code throws unexpected end of input, you are missing closing parentheses for $(document).ready():
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
In the case of multiple checkboxes that refer to the same product that should stay hidden:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).val();
if($(this).is(':checked')){
$("." + inputValue).hide();
}else{
$("." + inputValue).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkbox4" value="Gluten">
<label for="checkbox4"> Gluten</label>
</li>
I've rewritten the code without jQuery, as it doesn't seem to need it...
Here is the pen: https://codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011
JS
//object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
Eggs: false,
Gluten: false
}
let clickedBox = (input) => {
//mark the selected allergen as checked
choices[input.value] = input.checked
//returns an array of classes for each element with the selected allergen
let selected = document.getElementsByClassName(input.value)
//iterates though array of elements with selected allergen
for (let i = 0; i < selected.length; i++) {
//creates an array of classes for each element
var classList = selected[i].className.split(' ')
var counter = 0
classList.forEach(x=>{
//if the element contains a class that is checked, hide it
if (choices[x]) {selected[i].style.display = 'none'} else{
//count the number of classes that aren't checked
counter++
//if the element has no classes that are checked, show it
if (counter == classList.length) {selected[i].style.display = 'block'}
};
})
}
};
HTML
<div class=" Eggs Gluten">
<strong>Eggs Gluten</strong>
</div>
<div class="Eggs ">
<strong>Eggs</strong>
</div>
<div class="Gluten ">
<strong>Gluten</strong>
</div>
<li>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxOne"
value="Eggs">
<label for="checkboxOne"> Eggs</label>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxTwo"
value="Gluten">
<label for="checkboxTwo"> Gluten</label>
</li>
It now iterates through all the elements that match the class and hide/show them based on the condition of the checked box.
Hope this helps!
Edit: fixed code, should work now!
I've been trying for a long time to make a button appear on a webpage and make the link that button goes to change depending on the radio button selected. However, so far nothing appears on my web page except for the radio buttons.
This is my code so far:
<div id="quick-book">
<script>
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div name ="button">
</div>
</div>
I hope someone here can help guide me in the right direction!
You should add a function in you code and add it when click in the radio.
Something like this:
<script>
function myFunction() {
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div id="button">
</div>
</div>
And change name="button" to id="button"
First, your <script> is executed only once, not on every radio button change. And since initially nothing is checked, script does nothing. Moreover, when this script is executed, elements below are not rendered yet. You need to:
1) Move the script down, below all your divs.
2) Create a change callback to check radio buttons values
<div id="quick-book">
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
</form>
<div id ="button">
</div>
</div>
<script>
function change(radio) {
if (radio.checked && radio.id === "radio-restaurant") {
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<script>
function checkRadio(radio) {
if (radio.id === "radio-restaurant"){
document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
</form>
<div id="button-div">
</div>
</div>
Try this:
<div id="quick-book">
<script>
function $(e) {
//Just something I have found useful
return document.getElementById(e);
}
function rb_onchange(s) {
//First clean up
$("button").innerHTML = '';
//The id is added because both radio buttons
//will fire this event when one changes
//So to prevent both both conditions firing you have to add this additional condition
if (s.checked && s.id == "radio-restaurant") {
//If the radio button is checked and the id of
//said radio button is the restaurant one then add the innerHTML
$("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
}
else if (s.checked && s.id == "radio-hotel") {
//If the radio button is checked and the id of
//said radio button is the hotel one then add the innerHTML
$("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
</form>
<div name ="button"></div>
</div>
EDIT:
Seems I failed to notice the id attribute of the button div.,....
Change:
<div name ="button"></div>
to
<div name="button" id="button"></div>
EDIT:
Adding some comments
$(document).ready(function ()
{
$("#watch-me").click(function()
{
$("#show-me:hidden").show('slow');
$("#show-me-two").hide();
$("#show-me-three").hide();
});
$("#watch-me").click(function()
{
if($('watch-me').prop('checked')===false)
{
$('#show-me').hide();
}
});
$("#see-me").click(function()
{
$("#show-me-two:hidden").show('slow');
$("#show-me").hide();
$("#show-me-three").hide();
});
$("#see-me").click(function()
{
if($('see-me-two').prop('checked')===false)
{
$('#show-me-two').hide();
}
});
$("#look-me").click(function()
{
$("#show-me-three:hidden").show('slow');
$("#show-me").hide();
$("#show-me-two").hide();
});
$("#look-me").click(function()
{
if($('see-me-three').prop('checked')===false)
{
$('#show-me-three').hide();
}
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-sm-12" align="center">
<form id='form-id'>
<input id='watch-me' name='test' type='radio' checked /> Radio 1
<input id='see-me' name='test' type='radio' /> Radio 2
<input id='look-me' name='test' type='radio' /> Radio 3
</form>
<br><br>
<div id='show-me'>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
</div>
</div>
<div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
<div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
</div>
</div>
I have the following script where I calculate a price based on user input radio buttons and output it into a section of html. The script is not working in internet explorer properly.
var newprice = "";
function CalcPrice(){
// I take the input from the radio buttons here
var goals = $("#menu input[type='radio']:checked").val();
if (goals=="Weight Loss"){
newprice="45";
} else {
newprice="55";
}
$('.pricetotal').html("$"+newprice.toFixed(2));
}
HTML
<form class= "meal-table" id="meal-radio" onsubmit="return false">
<fieldset id="menu">
<input type="radio" id="radio01" name="menu" value="Weight Loss" />
<input type="radio" id="radio02" name="menu" value= "Performance"/>
</fieldset>
<div>
<div class="meal-plan-btn">
<button id="mealbtn" onclick="CalcPrice()">Add To Cart</button>
</div>
</div>
// this is where the price will be injected
<div class="pricebox" id="priceboxmobile">
<div class="pricetotal" >
<span ></span>
</div></div>
Changing this line
$('.pricetotal').html("$"+newprice.toFixed(2));
To:
$('.pricetotal').empty().html("$"+newprice.toFixed(2));
Unable to submit form with multiple div id, when i have only one div id form is submitting correctly when i use more than one div id form is not submitting. I want to show the new fields when a radio button is pressed, for the purpose of hiding and visbility i used div id(four div id with different id names) please help
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Report Generation</title>
<link rel="stylesheet" media="screen" href="../css/formstyle.css">
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
</head>
<body onLoad="setVisible('Div4', false); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);">
<form class="reg_form" action="pr.php" method="post" name="reg_form">
<ul>
<li>
<p>What type of Report you want to Create ?</p><br/>
</li>
<li>
<input type='radio' name='myradio' value='1' onclick="setVisible('Div1', true); setVisible('Div2', false);setVisible('Div3', false);setVisible('Div4', false);" />Based on Date<br/>
<input type='radio' name='myradio' value='2' onclick="setVisible('Div2', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div4', false);" />Based on Income<br/>
<input type='radio' name='myradio' value='3' onclick="setVisible('Div3', true); setVisible('Div1', false);setVisible('Div2', false);setVisible('Div4', false);" />Based on District<br/>
<input type='radio' name='myradio' value='4' onclick="setVisible('Div4', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);" />Based on Age<br/>
</li>
<li>
<div id='Div1'>
<p>From Date:</p> <input type="date" name= "from" required><br/>
<p>To Date:</p> <input type="date" name= "to" required><br/>
</div>
</li>
<li>
<div id='Div2'>
<p>Select Slab:</p>
<input type="radio" name="slab" value="s1">Slab-1<br/>
<input type="radio" name="slab" value="s2">Slab-2<br/>
<input type="radio" name="slab" value="s3">Slab-3<br/>
</div>
</li>
<li>
<div id='Div3'>
<p>Enter District:</p><br/>
<input type="text" name= "dist" required>
</div>
</li>
<li>
<div id='Div4'>
<p>Select Age From:</p><br/>
<input type="number" name= "afrom" required>
<p>To:</p>
<input type="number" name= "ato" required>
</div>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</div>
</form>
</body>
</html>
The problem is that you have required attributes on hidden input fields. When the form is submitted with these fields hidden (and them having no value), you're getting the errors:
An invalid form control with name='from' is not focusable.
An invalid form control with name='to' is not focusable.
An invalid form control with name='dist' is not focusable.
An invalid form control with name='afrom' is not focusable.
An invalid form control with name='ato' is not focusable.
By showing all the fields, or removing the required attributes, the form submits fine. A solution to this is to add the required attribute when shown and remove it when hidden.
To achieve this, firstly, define the following function:
function setRequired()
{
var r = document.getElementsByClassName('required')
for (var i in r)
{
if (r[i].parentNode && r[i].parentNode.style.visibility == 'visible')
{
r[i].required = true
}
else
{
r[i].required = false
}
}
}
Secondly, replace all required attributes with class="required". And thirdly, add ;setRequired() to the onclick events of the four radio buttons (at the end, after the setVisibles).
change:
<button class="submit" type="submit">Submit Form</button>
to:
<input type="submit">Submit Form</input>
I have been stuck with a code for a few days, and what I'm really trying to do is to append NEXT and PREVIOUS (link/button) on a radio button.
<div id="slides">
<ul class="options-list">
<li>
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</ul>
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
what I am trying to do here is that, when i click on next, it will select the radio button below it, so the code above has bundle-73, bundle-72 and bundle-74, says if the default selected is bundle-73, when i click next, it should select bundle-72.
Your HTML looks broken so I'm going to assume you really mean this:
<div id="slides">
<ul class="options-list">
<li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
<li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
<li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</ul>
</div>
Then your next action would look like this:
$('#next').click(function() {
var $all = $('.getradiotomove'); // Get them all
var $current = $('.getradiotomove:checked'); // Get the current one
var index = $all.index($current) + 1; // Find the index of the next one
if(index >= $all.length) // Wrap around at the end
index = 0;
$($all[index]).attr('checked', 'checked'); // Check it.
});
Demo: http://jsfiddle.net/ambiguous/hTgv3/1/
This assumes that you only have the one group of radio buttons.
You should be able to sort out the previous action yourself.
References:
:checked selector
index function
Maybe somethining like this?
<ul class="options-list">
<li>
<input type="radio" name="bundle_option" value="73">
</li>
<li>
<input type="radio" name="bundle_option" value="72">
</li>
<li>
<input type="radio" name="bundle_option" value="74">
</li>
</ul>
and javascript:
$('#next').click(function(){
$('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
return false;
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next').click(function() {
var checkedOp = $('input[name=bundle_option]:checked')
var match = checkedOp.next('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
});
$('#prev').click(function() {
var checkedOp = $('input[name=bundle_option]:checked');
var match = checkedOp.prev('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
});
}
);
</script>
</head>
<body>
<div id="slides">
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
</body>
</html>