We Keep Coding

Validating - at least one checkbox is checked

I have a problem in validating whether at least one checkbox is checked or not.
The same code is being used for a different form and its working perfectly but I can't figure why it doesn't on this form.
Script:
if(jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
}else{
$("#MOTFORMERROR").html("");
}
Html:
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input"/> EMS<br />
<input name="" type="checkbox" class="form-check-input"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>
The code in the block of the if statement is being run all the time, instead of the code in the block of the else statement, even if one or all checkboxes are checked!

your code does not show when the javascript is executed, maybe your checkboxes are not yet rendered when you look for them.
In fact if you run your code in the exact order you posted here is perfectly normal that your condition is always true.
If you put your code inside a function to be called after all the HTML is rendered everything works perfectly:
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input"/> EMS<br />
<input name="" type="checkbox" class="form-check-input"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>
<!-- ... -->
<button id="check_btn">Click me</button>
<!-- ... -->
<script>
var valid;
$('#check_btn').click(function() {
if ($('#MOTForm input[type=checkbox]:checked').length == 0) {
valid = false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
$("#MOTFORMERROR").html("");
}
});
</script>

Since the variable valid wasn't defined, there was an error in your initial code (see below). This error is visible in the browser console.
Uncaught ReferenceError: valid is not defined
Because of that error, the lines after valid = valid && false; are not being executed.
To fix this, declare that variable before this code is run:
var valid = false;
//...other code to check if form is valid
Then move the original JavaScript code into a function that can be run on submit (e.g. function check() {...}). See this demonstrated below. It uses the jQuery function .click() to bind the event handler to the submit button. You will also notice it uses .ready() to wait until the DOM is ready before binding the event handler to the submit button.
//wait until DOM is ready to bind check function to button click
$(document).ready(function(readyEvent) {
$('#submit').click(check);
})
var valid = false;
function check() {
if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
console.log('no error- clearing error html');
$("#MOTFORMERROR").html("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input" /> HEMS
<br />
<input name="" type="checkbox" class="form-check-input" /> EMS
<br />
<input name="" type="checkbox" class="form-check-input" /> Walk-in
<br />
<button id="submit">
Submit
</button>
</form>
<p id="MOTFORMERROR"></p>
</div>
Update:
You typed a comment on your post (replying to questions in other comments):
valid is declared at the beginning of .click
Now that that information is revealed, it makes me feel like most of what I said above is useless. Moving the declaration of valid into the click handler seems like a trivial change and there isn't much different besides that... See the example below:
//wait until DOM is ready to bind check function to button click
$(document).ready(function(readyEvent) {
$('#submit').click(check);
})
function check() {
var valid = false;
if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
valid = valid && false;
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
console.log('no error- clearing error html');
$("#MOTFORMERROR").html("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input" /> HEMS
<br />
<input name="" type="checkbox" class="form-check-input" /> EMS
<br />
<input name="" type="checkbox" class="form-check-input" /> Walk-in
<br />
<button id="submit">
Submit
</button>
</form>
<p id="MOTFORMERROR"></p>
</div>

Please have a look at the following snippet. It does that you are looking for. I removed the valid variable, since it isn't apparent, where this parameter is used. Apparently, you can add it and use it as you think.
$(function(){
function checkCheckBoxes(){
if($('#MOTForm input[type=checkbox]:checked').length == 0) {
alert("1");
$("#MOTFORMERROR").css('color', 'red');
$("#MOTFORMERROR").html("*Choose at least one");
} else {
$("#MOTFORMERROR").html("");
}
}
$(".js-check").on("change", checkCheckBoxes);
checkCheckBoxes();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="width: 10%;" rowspan="3">
<div style="padding-left:5px;">
<form id="MOTForm">
<input name="" type="checkbox" class="form-check-input js-check"/> HEMS<br />
<input name="" type="checkbox" class="form-check-input js-check"/> EMS<br />
<input name="" type="checkbox" class="form-check-input js-check"/> Walk-in<br />
</form>
<p id="MOTFORMERROR"></p>
</div>
</td>

Click on checkbox label not working

I have a checkbox inside a P with class vertical options. I have written script to implement checkbox functionality even on clicking the P. The code is:
$(".vertical-options,.horizontal-options").click(function(event){
var input = $(this).find('input').first();
console.log(input);
if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
if(input.is(':checked')){
input.prop('checked', false);
} else {
input.prop('checked', true);
}
}
});
but with this logic clicking on the checkbox label does not work. What am I doing wrong?

You need to use label tag for this purpose. Write id of target checkbox in for attribute of label tag.
<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />
<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />
<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />
If you want to do this work using jquery for other tag, see example
$("p").on("click", function(e){
var checkbox = $(this).find(':checkbox');
if ($(this).is(e.target))
checkbox.prop('checked', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Checkbox-1
<input type="checkbox" />
</p>
<p>
Checkbox-2
<input type="checkbox" />
</p>
<p>
Checkbox-3
<input type="checkbox" />
</p>

Checkbox with JS and Mobile

Hello and thanks in advance for any help
In my store page, I have a checkbox that is checked when user agrees with the terms. When he checks the checkbox, submit button is disabled (false). My problem is that this solution doesn't work on iPhone and other mobile devices.
Here's the code:
function terms() {
if (document.getElementById("cbTerms").checked)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
function cbc() {
if (document.getElementById("cbc").checked)
document.getElementById("cbc") = ("הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה");
else
document.getElementById("cbc").value = ".";
}
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br>
<br>
<input type="checkbox-0" id="cbTerms" name="cbTerms" onclick="terms();" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר כי קראתי את התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" oninput="cbc()" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">

At first sight your first checkbox is not really a checkbox.
<input type="checkbox-0" ...> should be more like: <input type="checkbox" ...>
With this change it will work.
P.S.:
Consider using braces for your if() {} else {} statements as you will propably run into some logic error if you change something in the future (e.g. add a line of code) and forget to add them.

The change event is preferred over click. And in addition, you'd pass the currently clicked checkbox on the fly as following
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br><br>
<input type="checkbox" id="cbTerms" name="cbTerms" onchange="terms(this);" style="...">
<p style="...">הריני מאשר כי קראתי את
התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" onchange="cbc(this)" style="...">
<p style="...">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
<script type="text/javascript">
function terms(me)
{
document.getElementById("submit").disabled = !me.checked;
}
function cbc(me){
var val=document.getElementById("cbc").checked?
"הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה":".";
document.getElementById("cbc").value = val;
}
</script>

How to disable radio button After 1 Click

JS :
function checkValue(option) {
if (option == "4") {
alert("Correct");
var pop = parseInt(window.name++);
alert(pop);
window.location="q2.html";
}
else {
alert("False, Option (4) is the Correct Answer.");
window.location="q2.html";
}
}
Html :
<html>
<input type="radio" name="option_1" value="1" onclick="checkValue(this.value);" /> Hyper Text Markup Languages <br /> <br />
<input type="radio" name="option_2" value="2" onclick="checkValue(this.value);" /> Highest Text Markup Language <br /> <br />
<input type="radio" name="option_3" value="3" onclick="checkValue(this.value);" /> Hyper Total Markup Language <br /> <br />
<input type="radio" name="option_4" value="4" onclick="checkValue(this.value);" /> Hyper Text Markup Language <br /> <br />
</html>

First thing, I'd clean up the HTML code a bit... I assume the four radio buttons are all possible answers to one question, in which case they should all have the same name (not value) so that you can only choose one answer; then in the script I'd would need to use more information than just the value of the checked answer, so instead of sending this.value to the function, I'd just send this:
<input type="radio" name="question_1" value="option_1" onclick="checkValue(this);" /> Hyper Text Markup Languages <br /> <br />
<input type="radio" name="question_1" value="option_2" onclick="checkValue(this);" /> Highest Text Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_3" onclick="checkValue(this);" /> Hyper Total Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_4" onclick="checkValue(this);" /> Hyper Text Markup Language <br /> <br />
In the script, to disable the radio buttons after they've been clicked, I would add a function that goes through each radio button that has the same name (as mentioned above) as the one that's been clicked, and disable it:
var radiobuttons = document.getElementsByName(option.name);
for(i = 0; i < radiobuttons.length; i++) {
radiobuttons[i].disabled = true;
}
Then, of course, the alert to let the visitor know whether they've got the right answer:
if (option.value == "option_4") {
alert("Correct");
} else {
alert("False, Option (4) is the Correct Answer.");
}
Here's a fiddle: http://jsfiddle.net/Niffler/nyqk6gga/
(I'm assuming you don't want to use jQuery; otherwise there would be much nicer-looking ways to do this...)

$(document).delegate(".rndmyradio","click",function () {
$(this).hide();
//if you want values of selected
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="rndmyradio" type="radio" name="option_1" value="1" /> <label>Hyper Text Markup Languages </label><br /> <br />
2. <input class="rndmyradio" type="radio" name="option_2" value="2" /> Highest Text Markup Language <br /> <br />
3. <input class="rndmyradio" type="radio" name="option_3" value="3" /> Hyper Total Markup Language <br /> <br />
4. <input class="rndmyradio" type="radio" name="option_4" value="4" /> Hyper Text Markup Language <br /> <br />

How to check if all the radio buttons are selected or not?

Well I am trying to build a web page that has set of radio buttons. I am using jquery to check if all the radio buttons are checked or not. Here is the code:
<body>
<p class="Cal">Welcome,</p>
<hr />
<p class="Radio1">Answer the questions below. You will find the results after clicking 'Check my score'.</p>
<hr />
<form method="post">
<p class="Question">1. Do you sleep early at night? (Anywhere around 9-10pm)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_0" />
</span></label>
<span class="Radio"> Yes
<br />
<label>
<input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Sometimes" id="RadioGroup1_2" />
Sometimes </label>
</span><br />
</p>
<p class="Question">2. Do you wake up early in morning?(Anywhere around 5-7am)</p>
<p>
<label>
<span class="Radio">
<input type="radio" name="RadioGroup2" value="Yes" id="RadioGroup2_0" />
Yes </span></label>
<span class="Radio"><br />
<label>
<input type="radio" name="RadioGroup2" value="No" id="RadioGroup2_1" />
No
</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="Sometimes" id="RadioGroup2_2" />
Sometimes
</label>
</span><br />
</p><input type="submit" value="Check my score" /></form></body>
Well there are 30 such questions. And my jquery code is as follows:
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.Radio').each(function () {
// Question text
var Question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(Question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
else{
msg = "Done!";
alert(msg);
}
return validate;
});
Now I tried all ways possible to make this work. But even after I check radio button for each answer I keep on getting the popup saying "Please answer the following questions:" and then a blank list. I never get the message "Done!" even though answer for all the questions are checked.
Where is the fault?

You can use the HTML5 required attribute, which is better option.
You can also use JavaScript loop and retrieve the value from each radio group, using
$("input:radio[name=radiogroupX]:checked")