Develop Reference

Select/Deselect only visible checkboxes

I have an accordion with check boxes for each accordion item, some of the accordion items are hidden with style="display:none;" attribute.
here is a screenshot of the html dom hierarchy
here is the html code
<div id="testcases" class="accordion js-accordion">
<div class="accordion__item js-accordion-item" id="0001" name="com.edgecase.TS_EdgeHome">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_Login" aria-hidden="true" style="display: none;">
<label for="labelauty-0001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Login</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" name="com.edgecase.TS_EdgeHome">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-00011">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Logout</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display:none;" name="com.edgecase.TS_EdgePanel">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_AddContract" aria-hidden="true" style="display: none;">
<label for="labelauty-1001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_AddContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="2001" style="display:none;" name="com.edgecase.TS_EdgeRoute">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2001" value="tc_VerifyContract" aria-hidden="true" style="display: none;">
<label for="labelauty-2001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_VerifyContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
I have created a function to select/deselect all check boxes, but it also checks the hidden check boxes.
function toggle(source){
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for(var i=0, n=checkboxes.length; i<n; i++) {
checkboxes[i].checked = source.checked;
}
}
Using below code I could add the attribute to label tag
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox')
for(var i=0, n=checkboxes.length; i<n; i++) {
var id = checkboxes[i].attributes.id
var id = id.textContent
$('label[for="'+id+'"]').attr("aria-checked","true");
}
I need to select/deselect all the check boxes for div elements without style="display:none;" attribute.(i.e. I need to select/deselect only visible check boxes) and add aria-checked="true" to label tag if checked else add aria-checked="false" using for value inside label tag.
can somebody help me figure this out?

You can verify if your checkbox is displayed with the fillowing:
for(var i=0, n=checkboxes.length; i<n; i++) {
if (checkboxes[i].style.display != "none"){
checkboxes[i].checked = true;
}
}

//find by name, filter for only those that are visible
$(document.getElementsByName('inputLableautyNoLabeledCheckbox')).filter(':visible').each( function () {
//change the state
this.checked = source.checked;
//find the label for the element and change it's aria state
$('label[for="'+ this.id +'"]').attr("aria-checked", source.checked);
} );

This will be even easy with jquery as I am seeing jquery tag in your question.
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
See the Snippet below:
$(document).ready(function () {
$("#chkCheckAll").click(function () {
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
});
$("#chkDisplayAll").click(function(){
if($("#chkDisplayAll").is(":checked"))
$("input:checkbox.not-visible").show();
else
$("input:checkbox.not-visible").hide();
})
$("input:checkbox.not-visible").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chkCheckAll" /> Check All
<input type="checkbox" id="chkDisplayAll" /> Display All
<br/>
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox1" />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox3" />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox5" />
You can also test it here

Select All | Deselect All check boxes using a toggle button

I need to select all and deselect all check boxes on a button toggle.
here is the html code for check-boxes
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
when I select this check box aria-checked="true" is automatically added to <label for="labelauty-2"> which output this
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
It changes the status to true or false when its checked and unchecked.
Now I have several check-boxes like this which needs to be checked or unchecked using a toggle button.
here is my html code for toggle button
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Here is my JS code which returns an error "prop is not defined"
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
How can I achieve this using javascript or jquery

Working ( without event listeners)
Note: See next example, that used event listeners and is preferred.
You had some issues I had to fix in order to get this working.
See: https://jsfiddle.net/0p64mdsg/4
First off, your input types were not actually toggles.
Secondly, you were not passing this when you were calling the toggle function.
Current version of code in my jsFiddle:
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" >
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
Test1
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Using Event Listeners
Since onClick is not preferred, you should handle the toggle click handling like this: https://jsfiddle.net/0p64mdsg/15/
<script>
document.getElementById("Toggle-Switch").addEventListener("click", toggle);
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2' + source);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
}
}
</script>

Try This To select/Deselect All Chechbox
$(document).on('click','#chkAll',function(){
if($(this).prop('checked')==true){
$('.ChkSelect').attr("checked",true)
}
else
{
$('.ChkSelect').attr("checked",false)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect"><br/><br/>
Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>

Filter div by checkbox

I have a checkbox. I need to filter by choosing them.
<div class="filter">
<div class="checkbox">
<label><input type="checkbox" rel="canada"/>Canada</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="china"/>China</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="usa"/>USA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="india"/>India</label>
</div>
</div>
Below the div which should be filtered
<div class="result">
<div class="canada">
<h1>Canada</h1>
<h2>Jason</h2>
</div>
<div class="china">
<h1>China</h1>
<h2>Ni</h2>
</div>
<div class="usa">
<h1>USA</h1>
<h2>Micheal</h2>
</div>
<div class="india">
<h1>India</h1>
<h2>Alan</h2>
</div>
</div>
Below my script. But I cannot take a value of checkboxes. How should I do. Is there some methods except of a lot of if?
<script>
var choose = document.getElementsByClassName('chechbox');
const div = document.getElementsByClassName('result');
if (choose.value){
result.style.display = "block";
}
</script>
Please, help me to write the script

Both choose and div are list of Elements, not a single Element. You need to iterate them.
var checkboxes = document.getElementsByClassName('checkbox');
Array.from( checkboxes ).forEach( function( checkBox ){
///rest of the code
})
Demo
var checkboxes = document.querySelectorAll('[type="checkbox"]');
var fnDisplayDivs = () => {
Array.from(checkboxes).forEach(function(checkBox) {
var div = document.querySelector("." + checkBox.getAttribute("rel"));
if (checkBox.checked) {
div.style.display = "block";
} else {
div.style.display = "none";
}
})
};
Array.from(checkboxes).forEach(function(checkBox) {
checkBox.addEventListener( "change", function(){
fnDisplayDivs();
})
});
fnDisplayDivs();
<div class="filter">
<div class="checkbox">
<label><input type="checkbox" rel="canada"/>Canada</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="china"/>China</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="usa"/>USA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="india"/>India</label>
</div>
</div>
<div class="result">
<div class="canada">
<h1>Canada</h1>
<h2>Jason</h2>
</div>
<div class="china">
<h1>China</h1>
<h2>Ni</h2>
</div>
<div class="usa">
<h1>USA</h1>
<h2>Micheal</h2>
</div>
<div class="india">
<h1>India</h1>
<h2>Alan</h2>
</div>
</div>

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
So you have to use element` index in order to access it. For instance,
if (choose[0].value){
result.style.display = "block";
}
I suppose you want to display div based on checkbox value. Also, you have to bind a change event handler to your checkboxes.
function change(){
var checkboxes = document.getElementsByClassName('checkbox');
var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
var allAreUnselected = chekboxInputs.every(function(elem){
return !elem.checked;
});
if(allAreUnselected){
chekboxInputs.forEach(function(input){
Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
item.style.display = 'block';
});
});
}
else {
chekboxInputs.forEach(function(input){
Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
item.style.display = input.checked ? 'block' : 'none';
});
});
}
}
change();
<div class="filter">
<div class="checkbox">
<label><input type="checkbox" rel="canada" onchange="change()"/>Canada</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="china" onchange="change()"/>China</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="usa" onchange="change()"/>USA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="india" onchange="change()"/>India</label>
</div>
</div>
<div class="result">
<div class="canada">
<h1>Canada</h1>
<h2>Jason</h2>
</div>
<div class="china">
<h1>China</h1>
<h2>Ni</h2>
</div>
<div class="usa">
<h1>USA</h1>
<h2>Micheal</h2>
</div>
<div class="india">
<h1>India</h1>
<h2>Alan</h2>
</div>
<div class="india">
<h1>India</h1>
<h2>Alan2</h2>
</div>
</div>

$(document).ready(function(){
$('input[type=checkbox]').change(function(){
if($(this).is(':checked')){ $('.'+$(this).attr('rel')).css('display','block');
}else{
$('.'+$(this).attr('rel')).css('display','none');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<div class="checkbox">
<label><input type="checkbox" rel="canada"/>Canada</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="china"/>China</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="usa"/>USA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" rel="india"/>India</label>
</div>
</div>
<div class="result">
<div class="canada" style="display:none">
<h1>Canada</h1>
<h2>Jason</h2>
</div>
<div class="china" style="display:none">
<h1>China</h1>
<h2>Ni</h2>
</div>
<div class="usa" style="display:none">
<h1>USA</h1>
<h2>Micheal</h2>
</div>
<div class="india" style="display:none">
<h1>India</h1>
<h2>Alan</h2>
</div>
</div>

Good and CLEAN way to check this? (JS + HTML)

I am trying to make a system that will check what radio button is pushed. (Side note there WILL always be 1 checked.) The code I have so far is rather lacking and I'm not entirely sure how to improve. Any help??
NOTE: I have multiple 'systems' that look just like this, so I'll give you just 1 chunk. That being said, there are multiple chunks like this. I need a way to make this easy on my end.
HTML:
<div class="panel">
<div class="panel-header">Storage</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE" checked>
<label class="radio" for="STORAGE">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>320GB Western Digital Caviar Blue 3.5" 7200RPM HDD</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE2">
<label class="radio" for="STORAGE2">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>500GB Western Digital WD5000AAKX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE3">
<label class="radio" for="STORAGE3">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>1TB Western Digital WD10EZEX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD" checked>
<label class="radio" for="SSD">
<center>
<img src="../images/Parts/None.png" class="comp-img"><br><br>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD2">
<label class="radio" for="SSD2">
<center>
<img src="../images/Parts/A-DATA_SSD.png" class="comp-img"><br><br>
<p>120GB A-Data ASP550SS3-120GM-C SSD</p>
<p class="money">+$40</p>
</center>
</label>
</div>
</div>
</div>
</div>
</div>
JS:
function Check(){
if(document.getElementById('STORAGE3').checked & HDD3Clicked==0){
if (HDD2Clicked>0) {
HDD2Clicked = 0;
HDD3Clicked = 1;
}else{
HDD3Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE2').checked & HDD2Clicked==0) {
if (HDD3Clicked>0) {
HDD2Clicked = 1;
HDD3Clicked = 0;
}else{
HDD2Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE').checked & HDD3Clicked>0) {
HDD3Clicked = 0;
Adding(-55);
console.log("Subtracting");
}else if(document.getElementById('STORAGE').checked & HDD2Clicked>0){
HDD2Clicked = 0;
Adding(-55);
console.log("Subtracting");
}
setTimeout(function() {Check()}, 5000);
}

If you can use jQuery it's fairly simple...
var clickedID;
$(document).ready(function(){
$('radio').on('click'),function(){
clickedID = $(this).attr("id");
});
});
That will give you the id of whichever radio element has been clicked. Then you can do with it what you'd like.

var radioButtons = selectorQueryAll("input[type=radio]:checked");
for (button in radioButtons) {
console.log(button.id);
}
1) Return all checked radio buttons
2) Output their ID to console.

If you don't want to use jQuery, this is a pure javascript solution:
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="1"/>
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="2" />
<script>
var handleClick = function(e){
alert(e.value);
}
</script>

Toggle view of DIVs using javascript array and radio button

I am trying to toggle the visibility to div content using javascript, not jquery. I can get it to work using a huge else if, but I am trying to use a for loop.
HTML
<fieldset >
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div >
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id" >Bill to your Account Number.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id" >Bill to a paymentcard.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id" >Bill to the reciever or a third party.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id" >Pay with check or money order.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id" >Pay with cash.</label>
</div>
</fieldset>
<div id="111"><p>This is 111</p></div>
<div id="222"><p>This is 222</p></div>
<div id="333"><p>This is 333</p></div>
<div id="444"><p>This is 444</p></div>
<div id="555"><p>This is 555</p></div>
Javascript
$(":input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
for(i=0; i<=choice.length; i++){
if($(this).val() === choice[i]){
$("#"+i).show();
} else {
$("#"+i).hide();
}
}
}
The problem I am having is that it does not seem to recognize the index of the array I am iterating through. So it always reads false. No JQuery please.

Demo - https://jsfiddle.net/of3gm5h8/1/
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id">Pay with cash.</label>
</div>
</fieldset>
<div id="111" class="hide">
<p>This is 111</p>
</div>
<div id="222" class="hide">
<p>This is 222</p>
</div>
<div id="333" class="hide">
<p>This is 333</p>
</div>
<div id="444" class="hide">
<p>This is 444</p>
</div>
<div id="555" class="hide">
<p>This is 555</p>
</div>
JS
$(function() {
$('.hide').hide();
$("input[type='radio']").on("change", function() {
// Hide all the .hide divs
$('.hide').hide();
var checked = $(this).val();
if (checked == "111") {
$("#111").show();
} else if (checked == "222") {
$("#222").show();
} else if (checked == "333") {
$("#333").show();
} else if (checked == "444") {
$("#444").show();
} else if (checked == "555") {
$("#555").show();
}
});
});

I think this is what you're looking for.
//removed the colon before input
$("input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
//get the value of the checked input
var value = $(this).val();
//match the index to the input and show it, hide the others.
$('#'+value).show().siblings().hide();
}
}
This assumes that the choice array has all the values from the the inputs.

Make sure the id's of the radio buttons are unique.(You already have the same name for the radio button to make it behave like a group.)
Then target the div using the value of the radio button.
JS
$(":input[type='radio']").on("change", function() {
// Hide all the divs
$('.div-container div').hide();
if ($(this).prop("checked")) {
$("#" + $(this).val()).show();
}
});
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id1" name="repl_name" type="radio" value="111">
<label for="repl_id1">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id2" name="repl_name" type="radio" value="222">
<label for="repl_id2">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id3" name="repl_name" type="radio" value="333">
<label for="repl_id3">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id4" name="repl_name" type="radio" value="444">
<label for="repl_id4">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id5" name="repl_name" type="radio" value="555">
<label for="repl_id5">Pay with cash.</label>
</div>
</fieldset>
<div class="div-container">
<div id="111">
<p>This is 111</p>
</div>
<div id="222">
<p>This is 222</p>
</div>
<div id="333">
<p>This is 333</p>
</div>
<div id="444">
<p>This is 444</p>
</div>
<div id="555">
<p>This is 555</p>
</div>
</div>
Check Fiddle