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>

How to hide a div using radio button

I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}

Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>

Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.

Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>

Allow selection of only 1 checkbox

I want allow selection of only 1 checkbox.
I am using the following script:
$(document).ready(function(){
$('#valores input').on('change', function() {
$('#valores input').not(this).prop('checked', false);
});
});
And HTML:
<div id="valores">
<div><input type="checkbox" name="valor" id="50reais" class="css-checkbox"/><label for="50reais" class="css-label radGroup1">R$ 50,00</label></div>
<div><input type="checkbox" name="valor" id="100reais" class="css-checkbox"/><label for="100reais" class="css-label radGroup1">R$ 100,00</label></div>
<div><input type="checkbox" name="valor" id="150reais" class="css-checkbox"/><label for="150reais" class="css-label radGroup1">R$ 150,00</label></div>
<div><input type="checkbox" name="valor" id="200reais" class="css-checkbox"/><label for="200reais" class="css-label radGroup1">R$ 200,00</label></div>
<div><input type="checkbox" name="valor" id="250reais" class="css-checkbox"/><label for="250reais" class="css-label radGroup1">R$ 250,00</label></div>
<div><input type="checkbox" name="valor" id="outroValor" class="css-checkbox"/><label for="outroValor" class="css-label radGroup1">Outro Valor</label></div>
</div>
Only works while the page is loading. After ready stops working.
Solved! There was an unnecessary script that I had left in the code and was causing this problem.
Thanks for all!

Sounds like your page may be updating dynamically after load.
Change it to use a delegated event handler, attached to a non-changing ancestor element:
$(document).ready(function(){
$(document).on('change', '#valores input', function() {
$('#valores input').not(this).prop('checked', false);
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/hrahs1gu/
Also view your page DOM (e.g. Chrome F12 DOM inspector) after loading, so see if the elements are what you expect.

HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app2.js"></script>
</head>
<body>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
</label>
</div>
</body>
</html>
Javascript code
$(document).ready(function(){
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
console.log($box);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
});

Function is not working on radio button onclick

JavaScript function (here f1()) is not getting called on radio button (here id=iprange) onclick event.
HTML
function f1() {
alert('yes');
}
<form role="form">
<div class="box-body">
<label>
<input type="radio" name="optionsRadios" id="fullscan1" value="option1" /> Full Scan
</label>
<!-- "IP Range" is the radio button that should show a "yes" alert. -->
<label>
<input type="radio" name="optionsRadios" id="iprange" value="option2" onclick="f1();" /> IP Range
</label>
From:
<input type="text" id="text1"> To:
<input type="text" id="text2">
<label>
<input type="radio" name="optionsRadios" id="subnet" value="option3" /> Subnet
</label>
<input type="text" id="text3">
<button class="btn btn-danger">Scan</button>
</div>
</form>

#Suresh Kota . At this point its impossible to give an satisfying answer, you'll have to do a step-by-step-investigation. Start with following and post your result here.
<head>
....
<script> // your script tag, I assume it looks like this
$(document).ready(function() {
/* some code */
});
// now include your function as last line outside document ready
function f1() {alert('yes');};
</script>
<!-- Make sure this is the only script tag in your html -->
....
</head>
If that doesn't help, rename your function, e.g. function xxx() {alert('yes');};
and same with onclick-attribute in input-tag: onclick="xxx()".
When having no succes, try directly: onclick="alert('yes')"
If that all not work, there's something inside your document.ready that manipulates the button, and you should post that code.

Try this one:
<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option1" />
<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option2" />
...
<script>
function handleClick(myRadio) {
alert('New value: ' + myRadio.value);
}
</script>

<label onclick="red()"><input type="radio" name="colors" id="red">Red</label>
or
<label onclick="red()"><input type="radio" name="colors" id="red"></label>
<label for="red">Red</label>
<script>
function red(){
alert('i am red');
}
</script>
if you want to call onclick function on radio button then you can use like this, it will work for you
Note: we have to call on function on label instead of radio button

draggable JQuery DIV don't work

i have some problem to use some JQuery code,when a div appear doesen't take the draggable property. This div appeare when the user simply press a button. The other command on the div (hide and show for example),works fine,but the draggable...not
This is the script code in tag:
<script type="text/javascript" src="System/Menu/interface.js"></script>
<script type="text/javascript" src="System/Menu/jquery.js"></script>
<script type="text/javascript" src="System/Menu/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//slide pannello start
$(".btn-slide").click(function () {
$("#startmenu").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
$("#layer1").hide();
$('#preferences').click(function () {
$("#layer1").show();
$('#layer1').Draggable();
});
$('#close').click(function () {
$("#layer1").hide();
});
});
</script>
and this is the div in tag:
<div id="layer1">
<div id="layer1_handle">
[ x ]
Preferences
</div>
<div id="layer1_content">
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked" value="Default" />Default<br />
<input type="radio" name="display" value="Option A" />Option A<br />
<input type="radio" name="display" value="Option B" />Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked" value="Enabled" />Enabled<br />
<input type="radio" name="autosave" value="Disabled" />Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
</div>
</div>
Dunno why,but i think is whitout dubts an error of code,is the first time i work with jquery and the draggable div.
Thanks to all want to help me :)

Due to the source highlighting this typo sticks out like a sore thumb:
$('#layer1').draggable(); // should be lowercase
You also need to make sure you're including the jquery-ui script:
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
I also don't see any HTML that has the preferences id.
<span id='preferences'>Preferences</span>