How can I enable child radio buttons when a parent radio button is selected?
<body>
<p>
<input type="radio" id="bdmain" name="educationalqualification" disabled="true" /> Bachelor's Degree
</p>
<ul>
<li>
<label>
<input type="radio" name="bd" disabled="true"/>
Four Years
</label>
</li>
<li>
<label>
<input type="radio"name="bd" disabled="true"/>
Exceeding Four Years
</label>
</li>
</ul>
</body>
Try,
$("#bdmain").parent().next("ul").find("input[type='radio']").each(function(){
$(this).removeAttr("disabled");
});
You'll have to remove disabled="true" from the parent button (I also added a label)
<body>
<p>
<label for="bdmain">
<input type="radio" id="bdmain" name="educationalqualification" />
Bachelor's Degree
</label>
</p>
<ul>
<li>
<label>
<input type="radio" name="bd" class="bdmain-child" disabled="true"/>
Four Years
</label>
</li>
<li>
<label>
<input type="radio"name="bd" class="bdmain-child" disabled="true"/>
Exceeding Four Years
</label>
</li>
</ul>
</body>
Assuming you can use jQuery:
$(function() {
// select by name to handle disabling the button if the radio is deselected
$("[name='educationalqualification']").click(function(e) {
// enable/disable child items if parent is not checked
$(".bdmain-child").prop("disabled", !$('#bdmain').is(':checked'));
});
});
JSFiddle Sample
You have radio buttons so I assume that there are multiple parent-children groups that need to behave properly. Fortunately you didn't tag jQuery so is a nice exercise not to forget javascript:
var parentChecks = document.getElementsByName('educationalqualification');
for (var i = 0; i < parentChecks.length; i++ ) {
parentChecks[i].addEventListener('change', function(e) {
for (var j = 0; j < parentChecks.length; j++) {
var radio = document.querySelectorAll('#' + parentChecks[j].dataset.group + ' input[type=radio]');
for (var k = 0; k < radio.length; k++) {
radio[k].disabled = !parentChecks[j].checked;
if (!parentChecks[j].checked) {
radio[k].checked = false;
}
}
}
}, false);
}
Demo: http://jsfiddle.net/Q9PZF/
In order to enable/disable child elements, the parent element must be enabled.
Try this code in which parent is enabled and on clicking it, its child radio elements will be enabled.
<html>
<head>
<script type='text/javascript'>
function enableChildren() {
var bdEls = document.getElementsByName('bd');
for(var i=0;i<bdEls .length;i++)
bdEls[i].disabled=false;
}
}
</script>
</head>
<body>
<p><input type="radio" name="educationalqualification" onClick="enableChildren()" id="bdmain"/>Bachelor's Degree</p>
<label><input type="radio" name="bd" disabled="true"/>Four Years</label></li>
<label><input type="radio" name="bd" disabled="true"/>Exceeding Four Years</label></li>
</body>
</html>
Related
Basically, I'm trying to append a radio button value to a div on click. This works as it should, but I can't seem to clear the div when clicking another radio button.
There should only ever be 1 piece of appended data within the div.
I tried to clear the div with innerHTML before appending the value but doesn't seem to work
$('input[type="radio"]').one('click', function () {
var getVal = $(this).val();
if ($('.selections').text().length < 0) {
console.log('less than');
}
else if ($('.selections').text().length > 0){
console.log('more than');
$('.selections').innerHTML = "";
$('.selections').append(getVal);
}
console.log(getVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>
<span class="radio-c">
<input type="radio" name="q1" value="Between £381K and £450K" id="between381">
Between £381K and £450K
</span>
</label>
<label>
<span class="radio-c">
<input type="radio" name="q1" value="Over £450K" id="over450">
Over £450K
</span>
</label>
</form>
<div class="selections">
</div>
innerHTML is used when using vanilla JS. You should use text() on jQuery referenced object. You also do not need to append here.
I also believe you have mistakenly used .one(), which should be .on().
$('input[type="radio"]').on('click', function () {
var getVal = $(this).val();
if ($('.selections').text().length < 0) {
//console.log('less than');
} else if ($('.selections').text().length > 0){
//console.log('more than');
$('.selections').text(getVal);
}
//console.log(getVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>
<span class="radio-c">
<input type="radio" name="q1" value="Between £381K and £450K" id="between381">
Between £381K and £450K
</span>
</label>
<label>
<span class="radio-c">
<input type="radio" name="q1" value="Over £450K" id="over450">
Over £450K
</span>
</label>
</form>
<div class="selections">
</div>
I have radio buttons that alert a different number depending on which one is selected.
var radioButtons = document.querySelectorAll('input[type=radio]');
var chanceoflive1 = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive1(){
if (user == 'bricks') {
chanceoflive1 = 1;
}
else if (user == 'wood') {
chanceoflive1 =3
}
else if (user == 'stone') {
chanceoflive1 = 2
}
alert(chanceoflive1);
}
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')" checked="checked">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<form action="chooseheight.html">
<div class="wrapper">
<button class="button" onClick="changechanceoflive1()" align=center>Submit</button>
</div>
</form>
When I click wood, it alerts 3, which is perfect. When I click stone, it alerts 2, which is great. Although, when I click bricks, it alerts 0. Why?
Change line 2 to be
var chanceoflive1 = 1;
and all will work as expected. The initial radio button is preselected. Without clicking away from bricks and then back to bricks, chanceoflive1 remains as its initial value of 0.
That's because the user haven't actually chosen anything if he doesn't click on any of the checkbox. Since you want to make bricks the default option, you can call choose('bricks') at the end of your script, or just set var user = 'bricks'; in the variable declaration.
I have shown the problem at http://jsfiddle.net/7ZpCW/1/
I have implemented the code such that when I click on checkbox or text next to it, checkbox should be selected/de-selected depending upon its previous state.
The problem is when I click on text, though checkbox is getting checked but the alert message is getting executed only the number of times the previous checkboxes were selected.
While when I click on checkbox alert message is executed based on current state.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<span id="MYARRAYloader_collapse" class = "w195" style="display:block">
<div class="sp15"> </div>
<div class="lf fs12 lh15" style="padding-left:10px;">
<input type="checkbox" name="MYARRAY[]" id="MYARRAY0" value="ALL" checked class="chbx checkbox-selector1">
All
<br>
<input type="checkbox" name="MYARRAY[]" value="V" class="chbx checkbox-selector1">
Opt1
<span class="gray t11">(42)</span>
<br>
<input type="checkbox" name="MYARRAY[]" value="N" class="chbx checkbox-selector1">
Opt2
<span class="gray t11">(38)</span>
<br>
</div>
<div class="sp12"> </div>
</span>
<script>
$('.checkbox-selector').click(function() {
var chb = $(this).prev();
chb.click();
return false;
})
$('.checkbox-selector1').click(function() {
var chb , chb1 , action;
chb= $(this);
clusterName = chb.attr('name');
clusterVal = chb.attr('value');
var array = new Array();
$('input[name="'+clusterName+'"]:checked').each(function(i,el){
alert('Count Me');
chb1 = $(this);
if(clusterVal == 'ALL')
{
if(chb1.attr('value')!='ALL')
{
chb1.attr("checked","");
}
else
array.push($(el).val());
}
else
{
if(chb1.attr('value')=='ALL')
{
chb1.attr("checked","");
}
else
{
array.push($(el).val());
}
}
});
});
</script>
You are seriously convoluting this problem. You can make the text clickable simply by wrapping the checkbox and text in a label.
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
jsFiddle: http://jsfiddle.net/7ZpCW/
You should really format your code like this to make it more semantic. But you won't. So you can fix your code by replacing this:
$('.checkbox-selector1').click( ... );
with this:
$('.checkbox-selector1').change( ... );
jsFiddle: http://jsfiddle.net/7ZpCW/2/
I have a bit of code that checks a list if LI tags which contain radio button input's. I have some clever logic via the Chocolate Chip Javascript framework library to work out when an LI is clicked, it will apply a relevant class to display the radio button has been selected.
However, I want to expand that logic so that it digs deeper into the LI and finds which radio button input is the one that is already selected (prior to any user choosing anything) when the page loads and apply a class to it so that it instantly highlights what is already selected.
I'm a bit new to Prototype so I'm not sure what is the best approach to do this so would appreciate any help you can offer.
So in the case below, I want to pick out button 3.
JSFiddle Link: http://jsfiddle.net/Qw6KA/
HTML:
<ul class="radioList">
<li>
<input type="radio" id="radio1" name="radioButton" value="Button 1">
<label for="radio1">Button 1</label>
</li>
<li>
<input type="radio" id="radio2" name="radioButton" value="Button 2">
<label for="radio2">Button 2</label>
</li>
<li>
<input type="radio" id="radio3" name="radioButton" value="Button 3" checked="checked">
<label for="radio3">Button 3</label>
</li>
<li>
<input type="radio" id="radio4" name="radioButton" value="Button 4">
<label for="radio4">Button 4</label>
</li>
</ul>
JS (Prototype):
$.RadioButtons = function( viewSelector, callback ) {
var items = viewSelector + ".radioList li";
var radioButtons = $$(items);
radioButtons.forEach(function(item) {
item.bind("click", function() {
radioButtons.forEach(function(check) {
check.removeClass("selected");
});
this.addClass("selected");
this.last().checked = true;
if (callback) {
callback(item);
}
});
});
};
Thanks
-JaXL
$.RadioButtons = function( viewSelector, callback ) {
var items = viewSelector + ".radioList li";
var radioButtons = $$(items);
radioButtons.forEach(function(item) {
item.bind("click", function() {
radioButtons.forEach(function(check) {
check.removeClass("selected");
});
this.addClass("selected");
this.last().checked = true;
if (callback) {
callback(item);
}
});
// Add this bit
if (item.select('input[checked]').length) {
item.addClassName('selected');
}
});
};
I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??
<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
</td>
Thanks for your help.....
First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.
Here is a solution with javascript only, without any jquery.
<html>
<head>
<script type="text/javascript">
function Validate() {
var radios = document.getElementsByName('IDType')
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert("Selected Value = " + radios[i].value);
return true; // checked
}
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Error!!!';
return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>
function validateRadioButtons(){
var radio = $('input:radio[name="IDType"]:checked');
if(radio.length == 0)//no buttons selected
{
$('ValidationError').text("you haven't selected any buttons!");
return;
}
$('ValidationError').text(radio.val()+' is selected');
}
ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.