We Keep Coding

Check if multiple radio buttons are checked

I'm not very good at Javascript, so I would like to ask help with the following:
I have a form, which has multiple radio groups (generated by php code, so I don't know their names OR how many will appear), and I need to check whether they are selected or not.
If not I want to show the user which question was not answered (no alert message, but it can be in text form or the question letters turning red).
I've tried googling the problem, but none of the previous answers were good to use in my case.
Here is my code so far:
function formCheck(formID) {
var eLabel=document.getElementById(formID).getElementsByTagName("label");
var radionames=[];
var eInput=document.getElementById(formID).getElementsByTagName("input");
var checker=true;
for (var i=0; i<eInput.length; i++) {
if (eInput[i].checked) {
radionames.push(eInput[i].name);
}
}
for (var i=0; i<eInput.length; i++) {
for (var j=0; j<radionames.length; j++) {
if (eInput[i]==radionames[j]) {
checker=true;
}
else {
alert();
checker=false;
}
}
}
return checker;
}
<form method="post" action="something.php" id="form1" name="form1">
<div class="que">que 1</div>
<div class="answ"><label><input name="2" value="7" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="2" value="5" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="2" value="8" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="2" value="6" type="radio">Answer 4</label></div>
<div class="que">que 2</div>
<div class="answ"><label><input name="1" value="4" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="1" value="1" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="1" value="2" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="1" value="3" type="radio">Answer 4</label></div>
<input class="submit_button" value="Submit the form" onclick="return formCheck('form1');" type="submit">
</form>
I wanted to create an array with the checked input "group" names, and compare it to all the input group names... the remaining ones will show the error (red text, a message, doesn't matter).
The problem is this code doesn't really do anything that I can see, and shows the something.php even if I don't have anything checked...
If this is not a good method, I'm open to any suggestions.
(I don't want to use jQuery, and the code has to run on older browsers too.)
Sorry for my english, it's not my native language &
Thanks for your help in advance!
A.

in second For loop in javascript :
use this line :
if (eInput[i].value == radionames[j]) {
instead of : if (eInput[i] == radionames[j]) {
you must realy get the value of eInput[i]

You can use document.querySelectorAll to get all input. You can also fine tune it by passing the type of input. Then filter out the name from the group of radio buttons
function getCheckedButton() {
var tempNames = [];
// get all radio button and loop through it to get it's name.
// use a tempArray to keep unique names
var radios = document.querySelectorAll('input').forEach(function(item) {
// if the name is not present then and only then adding name to the array
if (tempNames.indexOf(item.name) === -1) {
tempNames.push(item.name)
}
})
// now looping through temp array
for (var i = 0; i < tempNames.length; i++) {
// using the name to select the radio button group to check if any of radio
// button in this group is checked or not
// if not checked then it will give null
if (document.querySelector('input[name="' + tempNames[i] + '"]:checked') !== null) {
console.log(document.querySelector('input[name="' + tempNames[i] + '"]:checked').value)
} else {
console.log("Radio button of group value " + tempNames[i] + " is unchecked")
}
}
}
<div class="que">
que 1</div>
<div class="answ">
<label>
<input name="2" value="7" type="radio">Answer 1</label>
</div>
<div class="answ">
<label>
<input name="2" value="5" type="radio">Answer 2</label>
</div>
<div class="answ">
<label>
<input name="2" value="8" type="radio">Answer 3</label>
</div>
<div class="answ">
<label>
<input name="2" value="6" type="radio">Answer 4</label>
</div>
<div class="que">que 2</div>
<div class="answ">
<label>
<input name="1" value="4" type="radio">Answer 1</label>
</div>
<div class="answ">
<label>
<input name="1" value="1" type="radio">Answer 2</label>
</div>
<div class="answ">
<label>
<input name="1" value="2" type="radio">Answer 3</label>
</div>
<div class="answ">
<label>
<input name="1" value="3" type="radio">Answer 4</label>
</div>
<button onclick="getCheckedButton()">Get checked buttons</button>

jQuery if a checkbox is checked, disable other specific checkboxes based on value

Here what I need is,
<div id="employeedetails-relation" class="check"><div class="checkbox"> <label><input type="checkbox" name="Employeedetails[relation][]" value="1"> Father</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="2"> Mother</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="3"> Spouse</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="4"> Child1</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="5"> Child2</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="6"> Father-in-law</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="7"> Mother-in-law</label></div></div>
Here if I check value 1 or 2, then value 6 and 7 checkbox must get disabled. And the same way if I check value 6 or 7, then checkbox value 1 and 2 must get disabled.
Suppose if I check value 3 first and then if I checked value 1 or 2, again value 6 and 7 must be get disabled.
If I unchecked value 1 and checked value 2, again value 6 and 7 must be get disabled, alternatively
My code:
$(\'input[type="checkbox"]\').click(function(){
if (this.checked && this.value === "1") {
$(\'#employeedetails-relation input[value="6"\').prop(\'disabled\', \'true\');
$(\'#employeedetails-relation input[value="7"\').prop(\'disabled\', \'true\');
}
elseif (!this.checked && this.value === "1")
{
$(\'#employeedetails-relation input[value="6"\').prop(\'disabled\', \'false\');
$(\'#employeedetails-relation input[value="7"\').prop(\'disabled\', \'false\');
}

Try this:
$(document).ready(function() {
$('#employeedetails-relation').on('change', ':checkbox', function() {
var value = parseInt($(this).val());
var checkedEl = [];
$(':checkbox:checked').each(function() {
checkedEl.push(parseInt($(this).val()));
});
$('#employeedetails-relation :checkbox').prop('disabled', false);
if ($.inArray(1, checkedEl) > -1 || $.inArray(2, checkedEl) > -1) {
$(':checkbox[value=6]').prop('disabled', true);
$(':checkbox[value=7]').prop('disabled', true);
} else if ($.inArray(6, checkedEl) > -1 || $.inArray(7, checkedEl) > -1) {
$(':checkbox[value=1]').prop('disabled', true);
$(':checkbox[value=2]').prop('disabled', true);
}
});
});
Check Demo: https://jsfiddle.net/tusharj/0hoh109k/1/

You can have different click handlers for the set 1,2 or 6,7 then check whether any of those are checked and then set the disabled property
var $checks12 = $('#employeedetails-relation').find('input[value="1"], input[value="2"]').click(function() {
$checks67.prop('disabled', $checks12.is(':checked'));
});
var $checks67 = $('#employeedetails-relation').find('input[value="6"], input[value="7"]').click(function() {
$checks12.prop('disabled', $checks67.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="employeedetails-relation" class="check">
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="1"/> Father</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="2"/> Mother</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="3"/> Spouse</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="4"/> Child1</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="5"/> Child2</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="6"/> Father-in-law</label></div>
<div class="checkbox"><label><input type="checkbox" name="Employeedetails[relation][]" value="7"/> Mother-in-law</label></div>
</div>

you have multiple errors in your javascript code. remove the backslash in your jquery selectors as follows:
$('input[type="checkbox"]')
you also forgot the end brackets in your selectors:
$('#employeedetails-relation input[value="6"]')
elseif does not exist in javascript, replace it with:
else if
here you can find a workin example of your code http://jsfiddle.net/klickagent/up59vsdg/1/.

The Perfect and Tested solution ...Just copy and paste and check
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).val()==1 || $(this).val()==2 ){
$('#checkbox6').attr('disabled','true');
$('#checkbox7').attr('disabled','true');
}
})
// var check= document.getElementsByName('Employeedetails[relation][]');
// alert(check.val);
});
</script>
<meta charset="windows-1252">
<title></title>
</head>
<body>
<?php
// put your code here
?>
<div id="employeedetails-relation" class="check"><div class="checkbox"> <label><input id="checkbox1" type="checkbox" name="Employeedetails[relation][]" value="1"> Father</label></div>
<div class="checkbox"><label><input id="checkbox2" type="checkbox" name="Employeedetails[relation][]" value="2"> Mother</label></div>
<div class="checkbox"><label><input id="checkbox3" type="checkbox" name="Employeedetails[relation][]" value="3"> Spouse</label></div>
<div class="checkbox"><label><input id="checkbox4" type="checkbox" name="Employeedetails[relation][]" value="4"> Child1</label></div>
<div class="checkbox"><label><input id="checkbox5" type="checkbox" name="Employeedetails[relation][]" value="5"> Child2</label></div>
<div class="checkbox"><label><input id="checkbox6" type="checkbox" name="Employeedetails[relation][]" value="6"> Father-in-law</label></div>
<div class="checkbox"><label><input id="checkbox7" type="checkbox" name="Employeedetails[relation][]" value="7"> Mother-in-law</label></div> </div>
</body>
</html>

assign different values if two different options are selected jquery

I am stuck at a place in Javascript/Jquery calculation.
Please take a look at the link:
http://thectiweb.com/booknow_new/
When the different option in the first row and second is selected, I need to show different values based upon those selection. Here is what I came up with.
<div class="row-fluid service">
<h3>step 1: Select Your Service*</h3>
<input id="proc1" type="radio" name="proc" value="120"><label for="proc1"><img src="img/simply.png" width="160"><br></label>
<input id="proc2" type="radio" name="proc" value="150"><label for="proc2"><img src="img/pristine.png" width="160"><br></label>
<input id="proc3" type="radio" name="proc" value=""><label for="proc3"><img src="img/custom.png" width="160"><br></label>
<div style="padding-bottom: 24px;" class="pop" id="pop">
<div class="popover fade right in" style="top: 137.5px; left: 861.033px; display: block;"><div class="arrow"></div><div class="popover-content error">CustomFitTM service must be quoted individually. A representative will contact you for pricing upon form submission</div></div>
</div>
</div>
<div class="clearfix"></div>
<div class=" row-fluid beds">
<h3>numbers of bedrooms</h3>
<input id="beds1" type="radio" name="beds" value="10"><label for="beds1"><img src="img/1.png"><br><small>one bedroom</small></label>
<input id="beds2" type="radio" name="beds" value="20"><label for="beds2"><img src="img/2.png"><br><small>two bedroom</small></label>
<input id="beds3" type="radio" name="beds" value="30"><label for="beds3"><img src="img/3.png"><br><small>three bedroom</small></label>
<input id="beds4" type="radio" name="beds" value="40"><label for="beds4"><img src="img/4.png"><br><small>four bedroom</small></label>
<input id="beds5" type="radio" name="beds" value="50"><label for="beds5"><img src="img/5.png"><br><small>five bedroom</small></label>
</div>

Auto scroll while selecting checkbox from div using javascript

i have two division tag one for maintain overflow content and another contain the check box
when i click any check box i just need to scroll bar depending up on the check box
i.e there is 20 check box, 9-10 are visible, if you want other then you have to scroll scroll bar, but i want functionality like when i click on 9 check box and the user want to go forward then 10 check box come up automatic. this functionality already provided in hot mail for selecting the mail.
for that one i have use following
<div>
<div id="text" style="width: 500px; height:200px; border: solid 1px grey; overflow: scroll;">
<input id="check1" type="checkbox" onclick="update(this.id)">Auto-scroll1<br>
<input id="check2" type="checkbox" onclick="update(this.id)">Auto-scroll2<br>
<input id="check3" type="checkbox" onclick="update(this.id)">Auto-scroll3<br>
<input id="check4" type="checkbox" onclick="update(this.id)">Auto-scroll4<br>
<input id="check5" type="checkbox" onclick="update(this.id)">Auto-scroll5<br>
<input id="check6" type="checkbox" onclick="update(this.id)">Auto-scroll6<br>
<input id="check7" type="checkbox" onclick="update(this.id)">Auto-scroll7<br>
<input id="check8" type="checkbox" onclick="update(this.id)">Auto-scroll8<br>
<input id="check9" type="checkbox" onclick="update(this.id)">Auto-scroll9<br>
<input id="check10" type="checkbox" onclick="update(this.id)">Auto-scroll10<br>
<input id="check11" type="checkbox" onclick="update(this.id)">Auto-scroll11<br>
<input id="check12" type="checkbox" onclick="update(this.id)">Auto-scroll12<br>
<input id="check13" type="checkbox" onclick="update(this.id)">Auto-scroll13<br>
<input id="check14" type="checkbox" onclick="update(this.id)">Auto-scroll14<br>
<input id="check15" type="checkbox" onclick="update(this.id)">Auto-scroll15<br>
<input id="check16" type="checkbox" onclick="update(this.id)">Auto-scroll16<br>
<input id="check17" type="checkbox" onclick="update(this.id)">Auto-scroll17<br>
<input id="check18" type="checkbox" onclick="update(this.id)">Auto-scroll18<br>
<input id="check19" type="checkbox" onclick="update(this.id)">Auto-scroll19<br>
<input id="check20" type="checkbox" onclick="update(this.id)">Auto-scroll20<br>
<script type="text/javascript">
function update(checkID) {
var box = document.getElementById("checkID");
var tag = document.getElementById("text");
tag.scrollTop = tag.scrollTop - 17;
setTimeout('update(checkID)', 1000);
}
</script>
</div>
</div>
how to scroll scroll bar when user select check box from the list
and also if user selecting forward than scroll down or user select backward than scroll up as per the user requirement
please help me
thanks in advance ...

I think i did what you want. You will need jQuery for this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="text" style="width:500px;height:200px;border:solid 1px grey;overflow:scroll;">
<input type="checkbox" />Auto-scroll1<br/>
<input type="checkbox" />Auto-scroll2<br/>
<input type="checkbox" />Auto-scroll3<br/>
<input type="checkbox" />Auto-scroll4<br/>
<input type="checkbox" />Auto-scroll5<br/>
<input type="checkbox" />Auto-scroll6<br/>
<input type="checkbox" />Auto-scroll7<br/>
<input type="checkbox" />Auto-scroll8<br/>
<input type="checkbox" />Auto-scroll9<br/>
<input type="checkbox" />Auto-scroll10<br/>
<input type="checkbox" />Auto-scroll11<br/>
<input type="checkbox" />Auto-scroll12<br/>
<input type="checkbox" />Auto-scroll13<br/>
<input type="checkbox" />Auto-scroll14<br/>
<input type="checkbox" />Auto-scroll15<br/>
<input type="checkbox" />Auto-scroll16<br/>
<input type="checkbox" />Auto-scroll17<br/>
<input type="checkbox" />Auto-scroll18<br/>
<input type="checkbox" />Auto-scroll19<br/>
<input type="checkbox" />Auto-scroll20<br/>
</div>
<script type="text/javascript">
$(function() {
var ct = $('#text'),
cboxes = $('input[type="checkbox"]', ct),
lastChecked = null;
cboxes.click(function() {
if (!lastChecked)
lastChecked = this;
var _current = $(this),
_last = $(lastChecked),
cindex = cboxes.index(_current),
lindex = cboxes.index(_last),
t = null;
//next
if (cindex >= lindex) {
t = $(cboxes[cindex + 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() + t.height() * 1.5 }, 500);
//prev
} else if (cindex < lindex) {
t = $(cboxes[cindex - 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() - t.height() * 1.5 }, 500);
}
lastChecked = this;
});
});
</script>
see this

How can I make this javascript form validation DRYer?

The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!

When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});

function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}

$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle