I have following HTML with two ULs.
Click
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>
First UL is with display: none and have one radio button is selected by default and Second UL is without selected.
Now I want get selected radio button value from visible UL.
Here is my jQuery Code:
$("#detail_buttons").click(function () {
if ($(".plan input[type='radio']:checked").val() != undefined) {
alert($(".plan input[type='radio']:checked").val());
}
});
My JSFiddle: Sample
Any Idea?
Thanks.
Use this way:
$(".plan:visible").find("input:radio:checked").val();
Snippet
$("#detail_buttons").click(function () {
alert($(".plan:visible").find("input:radio:checked").val());
return false;
});
.none {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check Value
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>
Related
I am currently new to web development, how do you get the total value of the chosen radio buttons and store it in an array then the link or page would be different base on the total value. Is it possible in javascript? let's say that the total values of the selected buttons is 50 then it will go to page1 if not it will go to page2 and so on.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<div class="wrap">
<h1 class="likert-header">Likert Scale survey</h1>
<form action="">
<label class="statement">Q1.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">Q2.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<button class="clear">Clear</button>
<button class="submit">Submit</button>
</div>
</form>
</div>
</HTML>
I have the following html and I want to set the value of the second radio button in the list to be checked. I know I can do this using the id attribute but how can I do the same
by using the class selector as below and chaining the input field to be checked?
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked
Below code may help you.
HTML
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
jQuery
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
For versions of jQuery prior to 1.6, use:
$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');
$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Fourth child selected:
<ul class="radio1">
<li>
<input id="1" type="radio" value="1" name="option1">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option1">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option1">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option1">
<label >four</label>
</li>
</ul>
Second child selected:
<ul class="radio2">
<li>
<input id="1" type="radio" value="1" name="option2">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option2">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option2">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option2">
<label >four</label>
</li>
</ul>
First child selected:
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option">
<label >two</label>
</li>
</ul>
First child selected:(same class name)
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option4">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option4">
<label >two</label>
</li>
</ul>
</body>
</html>
Even the use of:
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
Works apparently, it is just for a case.
It set the checked on all the radio until the last one, that it is set just because it is the last.
A more meaning solution would be to use the .last() to go directly on the radio option you want to set:
$(function(){
// Set the last checked radio
$('.myOptionList li > input[name="options"]').last().prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" checked name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
To ensure it's working properly I set the first radio checked.
But I suggest to change your code in a way that you select the radio on the value attribute.
The benefit of this is that your code will be more clear and easy to understand and change, and more if the order of radios change it will still works.
I have some quizzes, like I showed below. Each Quiz ends with submit and reset button. The problem here is, if I click submit button in a quiz it shows the other quiz answer too.
Can someone help me to prevent showing the answer other than active quiz div
<div id="quiz-1" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-2" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-3" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-1 -->
<div id="quiz-2" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-2 -->
<div id="quiz-3" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-3 -->
$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);
function chkd_answer() {
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$('.expn').slideToggle();
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
function reset(){
var chkd_optn = $('input:checked');
chkd_optn.prop("checked", false);
$('.expn').slideUp();
$('li').removeClass('g-class r-class');
}
Try replacing your function with the below one:
function chkd_answer() {
var currentButton = $(this);
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$(currentButton).closest(".quiz").find('.expn').slideToggle(); // searching the associated .expn element to show it
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
Also all your code show work with the associated option buttons from where the button has been clicked. So please check your rest of the code too.
I have following HTML and I want to get all radio IDs which label class is r_on inside <ul class="plan">...</ul>
<ul class="plan">
<li>
<p>One Month</p>
<label for="36" class="label_radio">
<input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
</label>
<strong>300 $</strong>
</li>
<li>
<p>Second Month</p>
<label for="37" class="label_radio r_on">
<input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
</label>
<strong>600$</strong>
</li>
<li>
<p>Third Month</p>
<label for="38" class="label_radio r_on">
<input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
</label>
<strong>1200 $</strong>
</li>
</ul>
Note: I want that result with comma separated string.
I want result like this: 37,38
Any Idea how to do this with jQuery?
Try to use $.fn.map method:
var ids = $('.r_on :radio').map(function() {
return this.id;
}).get().join();
Check the demo.
var ids = $('.r_on :radio').map(function() {
return this.id;
}).get().join();
alert(ids);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="plan">
<li>
<p>One Month</p>
<label for="36" class="label_radio">
<input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
</label>
<strong>300 $</strong>
</li>
<li>
<p>Second Month</p>
<label for="37" class="label_radio r_on">
<input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
</label>
<strong>600$</strong>
</li>
<li>
<p>Third Month</p>
<label for="38" class="label_radio r_on">
<input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
</label>
<strong>1200 $</strong>
</li>
</ul>
Try this..
<ul class="plan">
<li>
<p>One Month</p>
<label for="36" class="label_radio">
<input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
</label>
<strong>300 $</strong>
</li>
<li>
<p>Second Month</p>
<label for="37" class="label_radio r_on">
<input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
</label>
<strong>600$</strong>
</li>
<li>
<p>Third Month</p>
<label for="38" class="label_radio r_on">
<input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
</label>
<strong>1200 $</strong>
</li>
</ul>
<script>
$('.plan .r_on input').each(function () {
var ar = this.id;
alert(ar);
});
</script>
var ids = [];
$('.r_on :radio').each(function() {
ids.push(this.id);
});
alert(ids);
Check This Demo.
var ids = [];
$('.r_on :radio').each(function() {
ids.push(this.id);
});
alert(ids);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="plan">
<li>
<p>One Month</p>
<label for="36" class="label_radio">
<input type="radio" value="300" data-name="One Month" id="36" name="long-strip">
</label>
<strong>300 $</strong>
</li>
<li>
<p>Second Month</p>
<label for="37" class="label_radio r_on">
<input type="radio" value="600" data-name="Second Month" id="37" name="long-strip">
</label>
<strong>600$</strong>
</li>
<li>
<p>Third Month</p>
<label for="38" class="label_radio r_on">
<input type="radio" checked="checked" value="1200" data-name="Third Month" id="38" name="long-strip">
</label>
<strong>1200 $</strong>
</li>
</ul>
I have a list that looks like that, so the user should check the item one by one and get a feedback the item is checked or not.
<html>
<head>
<link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script>
</head>
<body>
<div id="topbar">
<div id="title">
Engine Run-up
</div>
<div id="leftnav">
Home
Overview
</div>
<div id="rightnav">
Next
</div>
</div>
<div id="content">
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="red"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Safety Belts -<font color="red"> fastened</font></span>
<input name="2" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Canopy -<font color="red"> closed / locked</font></span>
<input name="3" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Pressure Warning Light -<font color="red"> OFF</font></span>
<input name="4" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Shut-off Valve -<font color="red"> check OPEN</font></span>
<input name="5" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Quantity Indicator -<font color="red"> check</font></span>
<input name="6" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Engine Gauges -<font color="red"> green range</font></span>
<input name="7" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Trim -<font color="red"> NEUTRAL</font></span>
<input name="8" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Controls -<font color="red"> free</font></span>
<input name="9" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1700-1800 RPM</font></span>
<input name="10" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Prop Control Level -<font color="red"> Cycle 3 x (50-250 RPM)</font></span>
<input name="11" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Ignition Switch - Cycle -<font color="red"> L-BOTH-R-BOTH</font></span>
<input name="12" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1500 RPM</font></span>
<input name="13" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carburetor Heat -<font color="red"> ON (<50 RPM)</font></span>
<input name="14" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> IDLE</font></span>
<input name="15" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carniretor Heat -<font color="red"> OFF</font></span>
<input name="16" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Corcuit Breakers -<font color="red"> check IN</font></span>
<input name="17" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Electric Fuel Pump -<font color="red"> ON</font></span>
<input name="18" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Wing Flaps -<font color="red"> T/O</font></span>
<input name="19" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Parking Brake -<font color="red"> release</font></span>
<input name="20" type="radio" value="other" />
</li>
</ul>
</div>
<div id="footer">
<a class="noeffect" href="#" onClick="resetChecklist();">Reset ZYX</a>
<br /><br />
<a class="noeffect" href="#" onClick="openXYZDE();">XYZ</a>
</div>
</body>
I want to check via JavaScript whether one of the "li" is checked, if so it should change that line to "green".
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="green"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
If jquery is an option, it becomes pretty simple.
function checkChanges()
{
$('.radiobutton font').attr('color', 'red');
$('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green');
}
$(function()
{
checkChanges();
$('.radiobutton :radio').on('click', checkChanges);
});
Although I HIGHLY recommend removing the font tag and instead add a class to the li, such as radiobutton-checked which sets the font color to green.
The ab ove code will reset all fonts to red, then find the one radio button with a checked radio inside it, iterate back up to the parent radiobutton (closest) and then find its child font tag and set its color to green. Then anytime a radio button gets clicked, it repeats the above process, thus keeping only the actively checked radio button green.