Change parent div if input radio is checked - javascript

I have 3 radio inputs, that are wrapped in div so that they look like buttons instead of the default radio circle input, on click I am replacing the button text for checked icon. Now on validation if it fails I am returning the old value, and would like to again replace the text of the button for icon checked if the radio input was checked.
This is the script for the click action:
$('.Image-input__input-wrapper').click(function() {
$( '.plan-text-icon-toggle' ).replaceWith( '<span class="plan-text-icon-toggle">This is what I need</span>' )
$(this).find( '.plan-text-icon-toggle' ).replaceWith( '<span class="plan-text-icon-toggle"><i class="ion-checkmark-round"></i></span>' );
});
This is the html:
<div class="Image-input__input-wrapper">
<span class="plan-text-icon-toggle">This is what I need</span>
<input class="Image-input__input" type="radio" name="plan" value="player" {{ old('plan')=="player" ? 'checked='.'"'.'checked'.'"' : '' }}>
</div>
Now I would like to to do same for on page load if the button was checked already, but not sure how to do it?
Update
I have tried with adapting the suggestion in the answers:
function checkinput(elem) {
var parent = elem.parent(),
checked = elem.is(':checked');
$('.radio').removeClass('active').html('This is what I need');
if (checked) {
parent.addClass('active').html('Checked');
}
}
// apply style on change
$('[type=radio]').on('change', function () {
var elem = $(this);
checkinput(elem);
});
// apply style on load
var elem = $('[type=radio]:checked');
checkinput(elem);
Here is the full example. But it is not working.

You can always use input radio and just change the style with CSS. Look the example bellow:
function checkinput(elem) {
var parent = elem.parent(),
checked = elem.is(':checked');
$('.radio').removeClass('active');
if (checked) {
parent.addClass('active');
}
}
// apply style on change
$('[type=radio]').on('change', function () {
var elem = $(this);
checkinput(elem);
});
// apply style on load
var elem = $('[type=radio]:checked');
checkinput(elem);
.radio .on {
display: none;
}
.radio.active .off {
display: none;
}
.radio.active .on {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label class="radio">
<span class="on">Message when checked</span>
<span class="off">Message when unchecked</span>
<input type="radio" name="my-radio" value="1">
</label>
</div>
<div>
<label class="radio">
<span class="on">Message when checked</span>
<span class="off">Message when unchecked</span>
<input type="radio" name="my-radio" value="2">
</label>
</div>
<div>
<label class="radio">
<span class="on">Message when checked</span>
<span class="off">Message when unchecked</span>
<input type="radio" name="my-radio" value="3" checked>
</label>
</div>

Related

HTML Jquery radio buttons switch as per select

I have 2 radio buttons that switch on selected. When one of the two radio buttons is selected, there should be a description for it, when the other is selected, the description should change.
The code below does pretty much what I want, but the problem is it does it on CLICK. One of the radio buttons will come as pre-selected (with 'checked' attribute) and a description isn't going to show up until the user clicks a radio button. Thus I would like for the description to match the corresponding radio button if one of them is pre-checked.
$(document).ready(function(){
$('input[name="subscription-type"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".subscription-desc").not(targetBox).hide();
$(targetBox).show();
});
});
.subscription-desc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
<input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
<label for="classic">Classic</label>
<input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
<label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
Description 1
</div>
<div class="adventurer subscription-desc">
Description 2
</div>
Basically in the above, "Classic" option will come as pre-selected, but there is no description for it until the user clicks it.
Seems like a simple problem but I just can't find a solution for it. Any help appreciated. Thanks
You can trigger the .click event on the :checked radio button so that it fires the click event:
$('input[name="subscription-type"]:checked').click();
$(document).ready(function() {
$('input[name="subscription-type"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".subscription-desc").not(targetBox).hide();
$(targetBox).show();
});
$('input[name="subscription-type"]:checked').click();
});
.subscription-desc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
<input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
<label for="classic">Classic</label>
<input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
<label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
Description 1
</div>
<div class="adventurer subscription-desc">
Description 2
</div>
Alternatively, you can extract the code that does the display into a function and call that:
function updateSubscription() {
var inp = $('input[name="subscription-type"]:checked');
var inputValue = $(inp).attr("value");
var targetBox = $("." + inputValue);
$(".subscription-desc").not(targetBox).hide();
$(targetBox).show();
}
$(document).ready(function() {
$('input[name="subscription-type"]').click(updateSubscription);
updateSubscription();
});
function updateSubscription() {
var inp = $('input[name="subscription-type"]:checked');
var inputValue = $(inp).attr("value");
var targetBox = $("." + inputValue);
$(".subscription-desc").not(targetBox).hide();
$(targetBox).show();
}
$(document).ready(function() {
$('input[name="subscription-type"]').click(updateSubscription);
updateSubscription();
});
.subscription-desc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
<input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
<label for="classic">Classic</label>
<input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
<label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
Description 1
</div>
<div class="adventurer subscription-desc">
Description 2
</div>
Note you can also use
var inputValue = $('input[name="subscription-type"]').val()
instead of
var inp = $('input[name="subscription-type"]:checked');
var inputValue = $(inp).attr("value");
I've kept the code above close to your original, just replacing the clicked this with $('input[name="subscription-type"]:checked')
Another alternative is to show the correct description at the time of load - this way you also don't get the "FOUC" (flash of unstyled content) where the description is displayed only after the page has fully loaded.
How you do this will depend on how you set the 'checked' value on the radio at page load, so may not be a suitable solution.

Radio button is showing div on selection but not hiding after selecting a different radio button

I have three divs I want to show based on a radio selection. I've written the below script, but the problem I've run into is the div doesn't hide after a different radio button is selected. I'm using ucalc so I can't change the class names or ids of the divs or the radio buttons so have to work with that.
Note, the radio button is automatically selected when the form loads so the first div needs to be showing initially.
Code below:
$(document).ready(function(){
// First Div/Radio Button
$('#input_radio-30-0-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
// Second Div/Radio Button
$("#grid-44-46").hide();
$('#input_radio-30-1-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
// Third Div/Radio Button
$("#grid-46-48").hide();
$('#input_radio-30-2-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-46-48").show();
} else {
$("#grid-46-48").hide();
}
});
});
I'm not very familiar with writing javascript (you can probably tell!) so an explanation for 'dummies' would be appreciated!
Thank you for your help!
You need to hide 2nd & 3rd div by CSS and when user change other button then find ID so according to ID show that div and rest div will hide as below snippet.
$(document).ready(function(){
$('#input_radio-30-0-des, #input_radio-30-1-des, #input_radio-30-2-des').on('change', function(){
var getid = $(this).attr('id');
if (getid=='input_radio-30-0-des') {
$('#grid-44-46, #grid-46-48').hide()//2nd and 3rd div hide
$("#grid-40-42").show();
}
if (getid=='input_radio-30-1-des') {
$('#grid-40-42, #grid-46-48').hide()//1st and 3rd div hide
$("#grid-44-46").show();
}
if (getid=='input_radio-30-2-des') {
$('#grid-40-42, #grid-44-46').hide()//1st and 2rd div hide
$("#grid-46-48").show();
}
})
});
#grid-44-46, #grid-46-48{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="div-show-hide" id="input_radio-30-0-des" checked> Button One</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-1-des"> Button Two</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-2-des"> Button Three</label>
<div id="grid-40-42"><h2>Show - Div One</h2></div>
<div id="grid-44-46"><h2>Show - Div Two</h2></div>
<div id="grid-46-48"><h2>Show - Div Three</h2></div>
Use wild card to hide all <div> which id start with grid- on radio change.
$("[id^=grid-]").hide();
$('#input_radio-30-0-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
$('#input_radio-30-1-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='input_radio-30-0-des' name="group1" />
<div id='grid-40-42'>grid-40-42</div>
<input type='radio' id='input_radio-30-1-des' name="group1" />
<div id='grid-44-46'>grid-40-46</div>
Note
No need multi-pal $(document).ready(function(){ .
Id must be unique.
I'm using a Javascript object to match each Radio button with it's targeted div.
I assume they are hidden by default. Just having fun and giving an alternative to multiple checks! A cleaner code also where you could easily setup all those confusing names...
$( document ).ready(function() {
let matches = {
"input_radio-30-0-des": 'grid-40-42',
"input_radio-30-1-des": 'grid-44-46',
"input_radio-30-2-des": 'grid-46-48'
};
$(":input[name='FM']").on("change", function () {
var target= matches[$(this).attr('id')];
$('#' +target).toggle($(this).checked);
$("[id^=grid-]").not('#' +target).hide();
})
});
div[id*='grid-'] { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="FM" id="input_radio-30-0-des" value="0"/>
<label for="input_radio-30-0-des">0</label>
<input type="radio" name="FM" id="input_radio-30-1-des" value="1"/>
<label for="input_radio-30-1-des">1</label>
<input type="radio" name="FM" id="input_radio-30-2-des" value="2"/>
<label for="input_radio-30-2-des">2</label>
<div id="grid-40-42">40-42</div>
<div id="grid-44-46">44-46</div>
<div id="grid-46-48">46-48</div>

changing span value when checkbox is checked and unchecked

I want to have a span value change when a checkbox is checked, then changed back to the original value when unchecked.
<span id="shipping">Standard</span>
<input class="form-check-input" type="checkbox" name="ship" value="Expedited" id="exp1">
The original value is 'Standard'. I want to change this to 'Expedited' when checked or 'Standard' if unchecked. How do I go about doing this?
Try like this. add a eventListener to that checkbox and check the status and change its value.
document.getElementById('exp1').addEventListener('click', function(){
if(this.checked){
this.value = 'Expedited';;
document.getElementById('name').innerHTML = 'Expedited';
}
else{
this.value = 'Standard';
document.getElementById('name').innerHTML = 'Standard';
}
});
<input class="form-check-input" type="checkbox" name="ship" value="Standard" id="exp1"><span id="name">Standard<span>
You can create two text child span with with Standard & Expedited and a class hiddden. Then on change of the checkbox get all the child span text and add or remove the hidden class using toggle
document.getElementById('exp1').addEventListener('change', function(e) {
changeDisplay()
})
function changeDisplay() {
document.querySelectorAll('.spanTxt').forEach(function(elem) {
elem.classList.toggle('hidden')
})
}
.hidden {
display: none;
}
<span>
<span class="spanTxt">Standard</span>
<span class="spanTxt hidden">Expedited</span>
</span>
<input class="form-check-input" type="checkbox" name="ship" value="Expedited" id="exp1">

change classname of parent span element using javascript

how can we change classname of parent span element on click of input radio button.
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>
I want to add "selected" class to span element which is with class "lbllevel1" on click of radio button.
Basically, i need output as <span class="lbllevel1 selected"> when radio button is clicked
you can add an event listener to radio button for click event or change event, use document.getElementById('L') to get the input, and inside event handler function use e.currentTarget to get current clicked input, you can use .classList += to add class to element, something like this:
var input = document.getElementById('L');
input.addEventListener("click", function(e){
e.currentTarget.parentElement.classList += ' selected';
})
.selected{
background-color:#888888;
}
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" type="radio" value="L">
</span>
</label>
var lInput = document.getElementById("L");
lInput.addEventListener("click", function() {
lInput.parentNode.classList.add("selected");
})
You could listen to the change event of radio by then add parent element with selected class if radio is checked:
document.querySelector("#L").addEventListener("change", function () {
// check if radio is checked
if (this.checked)
{
// add .selected class to parent
this.parentElement.classList.add("selected");
}
});
working copy
<label for="L">
<span class="lbllevel1">
<span class="label-size">L</span>
<input id="L" name="size" onclick="changeAttr(this)" type="radio"
value="L">
</span>
</label>
<script>
function changeAttr(ele)
{
ele.parentElement.classList.add('newClass');
}
</script>
Please see if this is helpful or not :)
Check through name
if($("input:radio[name='Name']").is(":checked")) {
//write your code
}
Check through class
if($("input:radio[class='className']").is(":checked")) {
//write your code
}
Check through data
if($("input:radio[data-name='value']").is(":checked")) {
//write your code
}

jquery radio button click and change function not working

I want to hide and show div according to radio buttons value.
HTML code is,
<div id="share_to_others">
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>
And jquery code that i tried is,
$("#share_to_others input[name='fx_sharepl_type']").click(function () {
alert("test");
});
$("#share_to_others input[name='fx_sharepl_type']").change(function () {
alert("test");
});
$("#fx_sharepl_type").change(function () {
alert("asdas");
});
$("input[name=fx_sharepl_type]:radio").change(function () {
alert("click fired");
});
$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
alert("click fired");
});
Many of them from jsfiddle working demo, But not working for me, i dont know why.
Am i doing anything wrong?
You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {
$(function() { // DOM loaded event handler
var show_duration = 0;
var content_33 = $("#content_33");
var content_22 = $("#content_22");
var content_11 = $("#content_11");
var bloc_radio_share = $("#share_to_others");
// Take an html element in parameter and show it
function show_content(content_id) {
content_id.show(show_duration);
}
// Take an html element in parameter and hide it
function hide_content(content_id) {
content_id.hide(0);
}
hide_content(content_22);
hide_content(content_11);
bloc_radio_share.change(function() {
var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
if (radio_checked_val == 33) {
hide_content(content_22);
hide_content(content_11);
show_content(content_33);
}
else if (radio_checked_val == 22) {
hide_content(content_33);
hide_content(content_11);
show_content(content_22);
}
else { // case content == 11
hide_content(content_33);
hide_content(content_22);
show_content(content_11);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
<label>
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
33
</label>
<label>
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
22
</label>
<label>
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
11
</label>
</div>
<div id="content_33">
This div is displayed because of click on radio button 33
</div>
<div id="content_22">
Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
If you click on radio button 11 you'll see me, like now
</div>
Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.
Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window.
Selecting any version of JQuery will make your code work.

Categories

Resources