change classname of parent span element using javascript - 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
}

Related

Change parent style with javascript based on checked input

I am looking to change the style of the parent label when the checkbox is checked. I realise this can't feasibly be done with CSS, is this possible with Javascript?
<label id="cont">
<span>
<input type="checkbox" />
</span>
</label>
Yes, here's an example:
const container = document.querySelector('#cont');
const checkbox = document.querySelector('input');
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
container.style.background = 'red'
} else {
container.style.background = 'white'
}
})
<label id="cont">
<span>
<input type="checkbox" />
</span>
</label>
Your question is a bit unclear. If you have just a single parent element and checkbox like your code suggests, then it's straightforward.
You can define the new styles you want a class(let's say a class called new-style) inside your stylesheet, then add a listener function inside your js script to trigger when the checkbox is clicked. The listener function will basically insert the class into the parent if it doesn't have it or remove it if it does. Something like this.
<script>
let checkbox = document.querySelector('input[type="checkbox"]');
checkbox.onclick = function() {
let parent = document.querySelector('#cont')
parent.classList.toggle('new-style');
}
</script>
Have you tried it this way? You can use css :checked property for this.
input:checked + label {
color: red;
}
<input id="name" type="checkbox">
<label for="name" id="cont">
label
</label>

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 parent div if input radio is checked

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>

How to setAttribute for element from radiobutton without submit

I have many buttons. If I click by one of them calls this function:
function addOptions(id)
{
var button = document.getElementById(id); //clicked button
radioDiv = document.querySelector("div.radioDiv");
radioDiv.style.visibility = "visible";
var raz = document.getElementsByName('status'); //get radioButtons
$(".radioDiv").ready(function() {
$('input[type=radio][name=status]').change(function(){
/*Here I'm trying to set attribute to only one button but
here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd)
and on 3rd button I choice the "radioButton" this code is set Attribute for
all of them (3) */
button.setAttribute("status", this.value);
});
});
}
Here index.html. RadioDiv is hidden by default
<div class="layer1">
<div class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
</div>
<div class="layer2"></div>
So, I need to set Attribute for button from value of RadioButton.
Use a global variable at the beginning of your js file.
var lastButton;
function addOptions(id) {
$(".radioDiv input[type=radio][name=status]").prop("checked", false);
lastButton = document.getElementById(id); //last clicked button
var status = lastButton.getAttribute("status");
$(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true);
$(".radioDiv").prop("visible", true);
$('input[type=radio][name=status]').click(function(){
lastButton.setAttribute("status", this.value);
});
}
Where you have the following markup:
<div id="status" class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
You can grab both radio buttons as a node list with:
var statusRadioButtons = document.getElementById('status').getElementsByTagName('input');
Then each button is an item in the node list:
statusRadioButtons[0]
statusRadioButtons[1]

Calling onclick on a radiobutton list using javascript

How do I call onclick on a radiobutton list using javascript?
How are you generating the radio button list? If you're just using HTML:
<input type="radio" onclick="alert('hello');"/>
If you're generating these via something like ASP.NET, you can add that as an attribute to each element in the list. You can run this after you populate your list, or inline it if you build up your list one by one:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
More info: http://www.w3schools.com/jsref/event_onclick.asp
To trigger the onClick event on a radio button, invoke the click() method on its DOM element:
document.getElementById("radioButton").click()
using jQuery:
$("#radioButton").click()
AngularJs:
angular.element('#radioButton').trigger('click')
I agree with #annakata that this question needs some more clarification, but here is a very, very basic example of how to set up an onclick event handler for the radio buttons:
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
The problem here is that the rendering of a RadioButtonList wraps the individual radio buttons (ListItems) in span tags and even when you assign a client-side event handler to the list item directly using Attributes it assigns the event to the span. Assigning the event to the RadioButtonList assigns it to the table it renders in.
The trick here is to add the ListItems on the aspx page and not from the code behind. You can then assign the JavaScript function to the onClick property. This blog post; attaching client-side event handler to radio button list by Juri Strumpflohner explains it all.
This only works if you know the ListItems in advance and does not help where the items in the RadioButtonList need to be dynamically added using the code behind.
I think all of the above might work. In case what you need is simple, I used:
function checkRadio(name) {
if (name == "one") {
console.log("Choice: ", name);
document.getElementById("one-variable-equations").checked = true;
document.getElementById("multiple-variable-equations").checked = false;
} else if (name == "multiple") {
console.log("Choice: ", name);
document.getElementById("multiple-variable-equations").checked = true;
document.getElementById("one-variable-equations").checked = false;
}
}
<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
<input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
<input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>
Try the following solution
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
</div>
The other answers did not work for me, so I checked Telerik's official documentation it says you need to find the button and call the click() function:
function KeyPressed(sender, eventArgs) {
var button = $find("<%= RadButton1.ClientID %>");
button.click();
}

Categories

Resources