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
Related
I would like it to function separately. I've been toying with this for a while, and I have tried putting them in separate tags, changing the $(this).attr("value") to $(this).attr("name"), and applying the changes in the HTML, but I cannot figure out how I would fix this. I am using ASP.NET MVC, with jquery-3.5.1.
Note: This is not the entire file, only the relevant parts. If I am incorrect about something and the whole file is needed, it is here: https://pastebin.com/YXp1Msj3.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<!--End JQUERY magic/start of next-->
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<label><input id="CoachEnabled" type="radio" name="athlete" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="coach" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
</div>
<!--End JQUERY-->
<div>
How about putting each block in a div having same class, here i have used js_option_container and using closest() to select closest parent, so that it can show or hide only div inside that container
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(this).closest(".js_option_container").find(".box").not(targetBox).hide();
$(this).closest(".js_option_container").find(targetBox).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="js_option_container">
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<div class="js_option_container">
<div>
<label><input id="CoachEnabled" type="radio" name="game" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="game" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
<span>Hello world</span>
</div>
<!--End JQUERY-->
<div>
I need help with my code. I've looked a lot on the internet, but the code i have found doesn't work.
I have two toggle buttons (hg-geraet-b, hg-geraet-v).
The button "hg-geraet-v" should not be selectable and deactivated by default.
If the button "hg-geraet-b" is pressed (Toggle to activate), the button "hg-geraet-v" should be selectable.
If you now check the button "hg-geraet-v" to activate, the button "hg-geraet-b" should be reset and no longer be selectable.
Which Java code do I have to insert into the < script>...< /script> at the end of my code, so that this works?
<div>
<label><input type="checkbox" name="product" class="card-input-element" />
<div class="card text-center">
<p>Header</p>
<div class="card-body">
<p class="card-text">Kategorie</p>
<div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Beraten" data-off="Beraten">
</div>
<div><input onclick="hg-geraet-v" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
</div>
</div>
</div>
</label>
</div>
Try this:
const hgGeraetB = document.querySelector('#hg-geraet-b'),
hgGeraetV = document.querySelector('#hg-geraet-v');
const handleChange = () => {
if (hgGeraetB.checked) {
hgGeraetV.disabled = false;
} else if (hgGeraetV.checked) {
hgGeraetB.checked = false;
hgGeraetB.disabled = true;
}
}
hgGeraetB.addEventListener('change', handleChange)
hgGeraetV.addEventListener('change', handleChange)
<div>
<label><input type="checkbox" name="product" class="card-input-element" />
<div class="card text-center">
<p>Header</p>
<div class="card-body">
<p class="card-text">Kategorie</p>f
<div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-size="sm" data-on="Beraten" data-off="Beraten">
</div>
<div><input id="hg-geraet-v" type="checkbox" disabled='true' data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
</div>
</div>
</div>
</label>
</div>
How do I find the selected id of radiobutton in list.
Here is the radiobutton:
<input name="1" id="1" type="radio">
Radiobutton are dynamics.
Here is the dynamic radio button list.
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>1. Here is the question??</label>
<div class="icheck-list">
<label class="icheck-list" id="1">
<input name="1" id="1" type="radio">Strongly Disagree
<span></span>
</label>
</div>
<div class="icheck-list">
<label class="icheck-list" id="2">
<input name="1" id="2" type="radio">Disagree
<span></span>
</label>
</div>
<div class="icheck-list">
<label class="icheck-list" id="3">
<input name="1" id="3" type="radio">Neither Agree or Disagree
<span></span>
</label>
</div>
<div class="icheck-list">
<label class="icheck-list" id="4">
<input name="1" id="4" type="radio">Agree
<span></span>
</label>
</div>
<div class="icheck-list">
<label class="icheck-list" id="5">
<input name="1" id="5" type="radio">Strongly Agree
<span></span>
</label>
</div>
</div>
</div>
</div>
There is 5 possible answers for a question.
I am using mvc 4.
For next question the i.e. for question 2.
The answer radiobutton is just like
<input name="2" id="11" type="radio">Strongly Disagree
So how do I find the selected radio button id and name???
here is the html i am using in view page.
<div class="tab-pane active" id="tab1">
#foreach (var items in Model.ParentList)
{
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>#items.QuestionText</label>
#foreach (var ch in Model.ChildList)
{
if (items.QuestionId == ch.QuestionId)
{
<div class="icheck-list">
<label class="icheck-list" id="#ch.AnswerId">
#*<input type="checkbox"> #Html.DisplayFor(model => model.Answers[j].AnswerText)*#
<input name="#ch.QuestionId" id="#ch.AnswerId" type="radio">#ch.AnswerText
<span></span>
</label> </div>
}
}
</div>
</div>
}
</div>
there is total 10 questions and each questions having 5 multiple choice answers.
so Model.ParentList i got total 10 questions with id
in Model.ChildList i got 50 answers.
so how do i bind and got the selected radio button value??
This piece of code will return the value of the checked radio button in jQuery:
$('input[name=<name of radio>]:checked').val();
In your case with a radio named '1' it would be:
$('input[name=1]:checked').val();
I hope I have understood the question correctly, and that this might be of use for you.
Please use value instead of id with each input, then you can try below code
$('input[type=radio]').on('change',function(event){
console.log($(this).val());
});
First attach an event listener which detects the change in selection.
jQuery( "input[name='1']" ).on( "click", function() {
var id = jQuery(this).attr("id");
var name = jQuery(this).attr("name");
alert("Id:"+ id);
alert("Name: "+name);
});
A similar method can be used where input[name='2']
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>
I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/
You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.
This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}
It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};