Enable/Disable group of form input elements with a checkbox - javascript

I want a checkbox that can enable (when checked) or disable (when unchecked) a group of input form elements. I have managed to do it with only one single element but I am struggling to do it with several elements. Here is my code:
Javascript:
function myFunction() {
var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");
for(var i=0; i<elements.length; i++) {
if(el.checked) {
elements[i].removeAttribute("disabled");
} else {
elements[i].setAttribute("disabled","disabled");
}
}
}
HTML
<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements<br>
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<br>
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<br>
<input type="text" class="child1" disabled="disabled">
(I have used getElementsByClassName as I understand that you can only have one ID by html page (i.e. getElementById would not work)).
JSFIDDLE https://jsfiddle.net/w2992L1y/

The disabled attribute does not have a value associated with it. So to disable an input element you only need to do <input disabled>. Similarly to enable/disable the input element using JavaScript you need to do:
element.disabled = true; //disable
element.disabled = false; //enable
For your example you could do like below:
function myFunction() {
var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");
for (var i = 0; i < elements.length; i++) {
if (el.checked) {
elements[i].disabled = true;
} else {
elements[i].disabled = false;
}
}
}
<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements
<br>
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<br>
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<br>
<input type="text" class="child1">
Here's the working fiddle of the same: https://jsfiddle.net/prerak6962/g96j4g7g/2/

Related

How to set property of radio button to checked

There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>

To push the checkbox values to the present array list values using javascript

i wanted to push the list of values selected from the checkbox to the text box that already has the array list of values......i mean when the data is been retrieved the textbox has its value (the retrieved value with the checkbox being checked)......when i select the new checkbox value and push that to the retrieved value.....the textbox only displays the newly selected checkbox values(the old checkbox values get removed)..........i want the textbox to display the old retrieved values with the currently selected checkbox values with checkbox being checked
var pc = [];
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked){
pc.push(myname1);
}
else
{
pc.splice( pc.indexOf(myname1), 1 );
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body onload="getpc()">
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
When the page loads check which checkboxes are checked and add them to the array.
var pc = [];
var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox") {
if (checkboxes[i].checked) {
getPc(checkboxes[i].id);
}
}
}
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked) {
pc.push(myname1);
} else {
pc.splice(pc.indexOf(myname1), 1);
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body>
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >

Javascript live calculation from radio buttons

There are some radio buttons
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
I want to print the "data-price" of selected radio button with live changing. How can I make this?
I don't know what exactly you are asking.. but if you just want to print the data-price, you can do it this way.
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').text(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
<div id='result'>
</div>
HTML
<input class='radio' type="radio" name="highlight" data-price="25.1" value="a1">a1
<input class='radio' type="radio" name="highlight" data-price="55.4" value="a2">a2
<input class='radio' type="radio" name="highlight" data-price="65.3" value="a3">a3
<input class='radio' type="radio" name="highlight" data-price="95.9" value="a4">a4
<input id="price" type="text">
Javascript (onclick)
var inputs = document.getElementsByClassName('radio');
var textbox = document.getElementById('price');
var i;
for (i = 0; i < inputs.length; i++) {
inputs[i].onclick = function(){
textbox.value = this.dataset.price;
}
}
Javascript (eventListener)
for (i = 0; i < inputs.length; i++) {
function myFn(){
textbox.value = this.dataset.price;
}
inputs[i].addEventListener("change",myFn);
}
https://jsfiddle.net/2zfjfkhL/

How can I check if all radio buttons are checked

I have a number of radio buttons with the option, 'yes' or 'no'.
Is there a simple way with jQuery to check if they all have 'yes' selected?
HTML is:
<input type="radio" id="yes1" name="group1" value="yes">Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes<br>
<input type="radio" name="group3" value="No">No<br>
I'm guessing it's something along the lines of
yes1 = $("#yes1").prop("checked", true);
yes2 = $("#yes2").prop("checked", true);
yes3 = $("#yes2").prop("checked", true);
if (yes1 & yes2 & yes3) {
// do something ?
}
You can rather compare the length of elements with ['value=yes] with elements with ['value=yes] and property :checked:
if($('[value=yes]').length==$('[value=yes]:checked').length){
//all yes elements are checked
}
One way is to check whether all the radios with value as yes is checked
if($('input[type="radio"][value="yes"]').not(':checked').length == 0){
//all checked
}
You may check the count of radio buttons with value != true. If the count is Zero, all radio buttons would be selected.
if(!$('input[type="radio"][value="yes"]').not(':checked').length){
//select all radio buttons with value = yes
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>
<input type="radio" id="yes1" name="group1" value="yes" checked>Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes" checked>Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes" checked>Yes<br>
<input type="radio" name="group3" value="No">No<br>
var yes1 = $("#yes1").is(":checked")
var yes2 = $("#yes2").is(":checked")
var yes3 = $("#yes3").is(":checked")
//$("#Myradio").is(":checked")
if (yes1 & yes2 & yes3) {
alert('sasa');
//do something
}
FIDDLE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>

check all radio groups are checked

I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length

Categories