In my example, each div with id contains controls for user's response (radio group).
I am trying to count number of DIVs, in which user has provided response and feed the result into a text field [name="REP"]. Either Yes or No is acceptable for response to be counted.
HTML structure follows:
<div class="figures">
<div id="Template_Questions">
<label for="number1">Number of ALL items:</label>
<input class="counter" type="number" name="ALL" id="number1">
</div>
<div id="Responded_Questions">
<label for="number2">Number of RESPONDED items:</label>
<input class="counter" type="number" name="RESP" id="number2">
</div>
</div>
<div class="sections"><p>Sections</p>
<div class="A" id="Q01">
<h2>Section 1</h2>
<h5>4201</h5>
<div class="Response">
<label><input type="radio" name="Radio1" value="Y" id="R1Y">Yes</label>
<label><input type="radio" name="Radio1" value="N" id="R1N">No</label>
</div>
<div class="Observation">
<label for="Obs1">Notes:</label><br>
<textarea name="observation" id="Obs1"></textarea>
</div>
</div>
<div class="B" id="Q02">
<h2>Section 2</h2>
<h5>4202</h5>
<div class="Response">
<label><input type="radio" name="Radio2" value="Y" id="R2Y">Yes</label>
<label><input type="radio" name="Radio2" value="N" id="R2N">No</label>
</div>
<div class="Observation">
<label for="Obs2">Notes:</label><br>
<textarea name="observation" id="Obs2"></textarea>
</div>
</div>
<div class="A" id="Q03">
<h2>Section 3</h2>
<h5>4203</h5>
<div class="Response">
<label><input type="radio" name="Radio3" value="Y" id="R3Y">Yes</label>
<label><input type="radio" name="Radio3" value="N" id="R3N">No</label>
</div>
<div class="Observation">
<label for="Obs3">Notes:</label><br>
<textarea name="observation" id="Obs3"></textarea>
</div>
</div>
<div class="B" id="Q04">
<h2>Section 4</h2>
<h5>4204</h5>
<div class="Response">
<label><input type="radio" name="Radio4" value="Y" id="R4Y">Yes</label>
<label><input type="radio" name="Radio4" value="N" id="R4N">No</label>
</div>
<div class="Observation">
<label for="Obs4">Notes:</label><br>
<textarea name="observation" id="Obs4"></textarea>
</div>
</div>
</div>
I have counted the total number of DIVs, containing response controls:
jQuery(function ($) {
$(function () {
var counter = $("[id^=Q]").filter(function ()
{
return this.id.match(/Q\d+/);
}).length;
$("input[name=ALL]").val(counter);
})});
I think I can also get number of checked controls, but actually need number of DIVs. On the other hand, if ANY of the radio btns (either Yes or No) = 1, then something like this
should do the trick and then just pass the number to the textfield?
$("#Div input:checkbox:checked").length
Thanks in advance.
since only one input could be checked in each div you can simply use something like this
$('input[type="radio"]:checked').length
UPDATE: auto update counter in text field using input change event
$('input[type="radio"]').change(function(){
$('#textfield-id').val( $('input[type="radio"]:checked').length );
});
Related
I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.
In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>
This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>
If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>
I'm attempting to get the text from an element, remove some of the string, add a question mark & then place the updated string into another element
However, when the element is returned, the markup generates additional unwanted space before & also puts the question mark on an entirely new line within the element.
This is what is returned from a console log
Code Example
// Set Variables for Dynamic Copy Function
let choiceNode = document.querySelectorAll('.choice');
let dynamicCopyNode = document.querySelector('.dynamic-copy');
// Update the text type on dynamic copy & append a question mark + remove 'The '
function updateChoice() {
let choiceSelected = this.textContent + '?';
let choiceSelectedTrim = choiceSelected.replace('The ', '');
dynamicCopyNode.textContent = choiceSelectedTrim;
}
// Click listener to trigger the function
Array.from(choiceNode).forEach(function(element) {
element.addEventListener('click', updateChoice);
});
<form>
<div class="choice-wrapper">
<div class="choice">
<input type="radio" name="choice" id="one" value="1">
<label for="one">
<p class="name">The first choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="2">
<label for="one">
<p class="name">The second choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="3">
<label for="one">
<p class="name">The third choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="4">
<label for="one">
<p class="name">The fourth choice</p>
</label>
</div>
<div class="error-wrap">
<label class="error" for="choice" generated="true"></label>
</div>
</div>
<div class="copy-wrapper">
<div class="variable-copy">
<p>Why did you choose</p>
<h1 class="dynamic-copy"></h1>
</div>
</div>
</form>
What I'm trying to achieve is a return like so first choice?
You have to get the textContent of the p tag, not the whole div.
// Set Variables for Dynamic Copy Function
let choiceNode = document.querySelectorAll('.choice');
let dynamicCopyNode = document.querySelector('.dynamic-copy');
// Update the text type on dynamic copy & append a question mark + remove 'The '
function updateChoice() {
// ======================= next line changed
let choiceSelected = this.querySelector('.name').textContent + '?';
let choiceSelectedTrim = choiceSelected.replace('The ', '');
dynamicCopyNode.textContent = choiceSelectedTrim;
}
// Click listener to trigger the function
Array.from(choiceNode).forEach(function(element) {
element.addEventListener('click', updateChoice);
});
<form>
<div class="choice-wrapper">
<div class="choice">
<input type="radio" name="choice" id="one" value="1">
<label for="one">
<p class="name">The first choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="2">
<label for="one">
<p class="name">The second choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="3">
<label for="one">
<p class="name">The third choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="4">
<label for="one">
<p class="name">The fourth choice</p>
</label>
</div>
<div class="error-wrap">
<label class="error" for="choice" generated="true"></label>
</div>
</div>
<div class="copy-wrapper">
<div class="variable-copy">
<p>Why did you choose</p>
<h1 class="dynamic-copy"></h1>
</div>
</div>
</form>
How can I move the input inside the <label> tag, so that it would be <label><input></label> using jQuery. I need to target all the answers within the select-option set.
<div class=”select-option”>
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Your quotes <div class=”select-option”> are incorrect! Use "
Than for the jQuery part:
$("label[for*='[0]_Actual_Answer']").prepend(function(){
return $(this).prev("input");
});
label{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-option">
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Using prepend(function)
$('.select-option label[for*=Actual_Answer]').prepend(function(){
return $(this).prev("input")
});
If I'm understanding correctly, what you may be after is something like this...
$(document).ready(function() {
$('.select-option input').each(function() { //Get every input in the "select-option" div
var t = $(this);
var l = t.siblings('label'); //Find the closest label
t.detach().appendTo(l);
});
});
JSFiddle
When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>
I am working on my personal site and I am trying to nest my radio buttons.
I know I am supposed to have javascript running to do what I need it to do but I cant get a clear answer. What I am trying to do is as follows.
Options number 2 and 6 both have sub options to go with them. But I want that if i select 1 or 3-5 or 7 then the user cannot select any of the subs. and if the user selects a sub by mistake and tries to select one of the aforementioned numbers then it will clear the sub selection. please help. Or at lease can some one point me in the right direction? thanks so much.
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<label class="five six">Section</label>
<div class="seven">
<label class="ten">
<input value="option_1" name="radios" type="radio" />
option 1</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_2" name="radios" type="radio" />
option 2</label>
<br>
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_3">
Sub 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_3" name="radios" type="radio" />
option 3</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_4" name="radios" type="radio" />
option 4</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_5" name="radios" type="radio" />
option 5</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_6" name="radios" type="radio" />
option 6</label>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_7" name="radios" type="radio" />
option 7</label>
</div>
</div>
</div>
</div>
</div>
Here's a little something using Jquery that might work if I understood your requirements correctly. The HTML is a dumbed down version of yours just to demonstrate the script.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("input[type=radio]").on("change",function(){
if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub"))
$(".sub").removeAttr("disabled");
else
$(".sub").attr("checked",false).attr("disabled","disabled");
});
});
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" class="one" value=""> Option 1<br>
<input type=radio name="lvl1" class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" class="three" value=""> Option 3<br>
<input type=radio name="lvl1" class="four" value=""> Option 4<br>
<input type=radio name="lvl1" class="five" value=""> Option 5<br>
<input type=radio name="lvl1" class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle to check online: https://jsfiddle.net/bds87fjt/
The same solution as above using pure Javascript:-
<!doctype html>
<html>
<head>
<script>
function disableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].checked=false;
sub[i].disabled=true;
}
}
function enableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].disabled=false;
}
}
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br>
<input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br>
<input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br>
<input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle for above: https://jsfiddle.net/0omtop0t/
And here's another neat little solution using just HTML and CSS: http://jsfiddle.net/NhXUV/
Not sure, it'll work in your case though. Worth checking out.
I'd definitely go with JavaScript for this one.
Basically, you could write a function that would be called whenever a radio button from a div of the class, lets call it gotNestedStuff, has his selection changed. The toggle will show/hide the div with the class nestedStuff that contains the sub-options that can only be selected if the main option is.
Here's the basic function (with jQuery):
<script type="text/javascript">
//let's hide the nested stuff on page load
$(document).ready(function() {
$('.nestedStuff').hide();
});
//on click on an element that has class "gotNestedStuff", show it's hidden content
$('.gotNestedStuff .option').on('change', function(e) {
console.log($(e.relatedTarget));
$(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle();
});
</script>
Working with this HTML for example :
<div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="1">Option 1
</div>
<div class="optionContainer gotNestedStuff">
<input class="option" type="radio" name="option" value="2">Option 2<br>
<div class="optionContainer nestedStuff">
<input class="option" type="radio" name="option" value="2.1">Option 2.1<br>
<input class="option" type="radio" name="option" value="2.2">Option 2.2<br>
</div>
</div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="3">Option 3<br>
<div>
</div>
You could also call a function "onclick" from your element that would validate if an item with nested stuff hidden is selected, that it should show it to the user.
Ex. <input type="radio" onclick="myfunction()" />