We Keep Coding

on click mulitple input then show button for validation jquery

I have here three sections, how can I make the next button show up when all three sections have been clicked? If one of them is not clicked then the button with the class "hideme" is visible, if all of them are clicked then hide "hideme" and show the "third_step" button.
<input type="date" name="purchase_date">
<input type="radio" name="group" value="one">
<input type="radio" name="group" value="two">
<input type="radio" name="group" value="three">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
<a class="next hideme">Next</a><a class="next third_step">Next</a>
Anybody please help, I don't know where to start on this.

Here I have add a id on <form>. And give the input some class .
use Change event | Show() | hide()
Try this
<form id="myForm">
<input type="date" name="purchase_date" class="date">
<input type="radio" name="group" value="one" classs="group">
<input type="radio" name="group" value="two" classs="group">
<input type="radio" name="group" value="three" classs="group">
<input type="radio" name="choice" value="yes" classs="choice">
<input type="radio" name="choice" value="no" classs="choice">
<a class="next" style="display:none">Next</a>
</form>
<script>
$(document).ready(function(){
$('.group').on('change',function(){
$('.date').change();
});
$('.choice').on('change',function(){
$('.date').change();
});
$('.date').on('change',function(){
var date = $('.date').val();
var group = ($('input:radio[name=group]:checked').val() || 0);
var choice = ($('input:radio[name=choice]:checked').val() || 0);
if(date != '' && group != '' && group != 0 && choice != '' && choice != 0)
$('.next').show();
else
$('.next').hide();
});
});
</script>

$(document).on("click, change","input[name=group],
input[name=choice],
input[name=purchase_date] ",
function(){
var groupSelected = $("input[name=group]:checked").val();
var choiceSelected = $("input[name=choice]:checked").val();
var dateSelected = $("input[name=purchase_date]").val();
if(groupSelected === undefined ||
choiceSelected === undefined ||
dateSelected === undefined ||
dateSelected === "")
{
$(".next").toggleClass("hideme",true);
}
else{
$(".next").toggleClass("hideme",false);
}
});

Disable last checkbox multiple choice required

Scenario :
I have a vote page, you have to select 3 of 4 candidates from the list.
Needs :
I need to make the last checkbox disabled after checking 3 of them (4).
Code :
HTML
<input class="cb" type="checkbox" name="condidate" value="1" onchange="cbChange(this)" />
<input class="cb" type="checkbox" name="condidate" value="2" onchange="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="3" onchange="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="4" onchange="cbChange(this)"/>
JS
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length - 3; i++) {
cbs[i].disabled = true;
}
obj.disabled = false;
}
Question :
How Can I make the last choice disabled after selecting the 3 others.

you need to call cbChange on click event of checkboxes.
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
var checkCount = 0;
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked === true)
checkCount++;
cbs[i].disabled = false;
}
if (checkCount >= 3){
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked === false)
cbs[i].disabled = true;
}
}
}
<input class="cb" type="checkbox" name="condidate" value="1" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="2" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="3" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="4" onclick="cbChange(this)"/>

When one of the checkboxes has changed, count the number that are unchecked. If there is only one, you can disable it; otherwise, if one is disabled, it must be re-enabled.

Check All checkbox should be unchecked

function toggle(source) {
checkboxes = document.getElementsByName('options[]');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
<label for="checkbox-1-6"></label>All
<br>
<input type="submit" name="formSubmit" value="Unsubscribe" />
</form>
When I check the All checkbox, of course, it will mark all the checkboxes, but once I uncheck one checkbox, the All checkbox is still checked. This should be unchecked. How should I do that using JS?

You will need to add onchange event handlers to every checkbox and check inside if the "All" checkbox should be checked (all checkboxes are selected) or unchecked (at least one is deselected). For example like this:
var checkboxes = [].slice.call(document.getElementsByName('options[]')),
allCheckbox = document.querySelector('input[value="All"]');
checkboxes.forEach(function(checkbox) {
checkbox.onchange = function() {
if (!this.checked) {
allCheckbox.checked = false;
}
else {
var checked = checkboxes.filter(function(check) {
return check.checked;
});
if (checked.length === checkboxes.length) {
allCheckbox.checked = true;
}
}
};
});
function toggle(source) {
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
<label for="checkbox-1-6"></label>All
</form>
Note that I converted checkboxes collection to array with [].slice.call in order to use convenient array methods. Simple for loops can be used instead.

I'd suggest the following:
function toggle() {
// getting a reference to all the 'name="option[]" elements:
var options = document.getElementsByName('options[]'),
// a reference to the 'all' checkbox:
all = document.getElementById('checkbox-1-6');
// if the changed checkbox is the 'all':
if (this === all) {
// we iterate over all the options checkboxes (using
// Array.prototype.forEach()):
Array.prototype.forEach.call(options, function(checkbox) {
// and we set their checked property to the checked property
// state of the 'all' checkbox:
checkbox.checked = all.checked;
});
} else {
// otherwise we set the 'all' checkbox to the state of
// the Boolean returned by Array.prototype.every(),
// which returns true if all checkboxes evaluate to
// the condition within the function, otherwise false:
all.checked = Array.prototype.every.call(options, function(checkbox) {
return checkbox.checked;
});
}
}
// getting a NodeList of all the elements of 'class="unsubscribe-checkbox"':
var options = document.querySelectorAll('.unsubscribe-checkbox');
// iterating over them, again with Array.prototype.forEach()
// and assigning a change event-listener, which will execute the
// name function:
Array.prototype.forEach.call(options, function(opt) {
opt.addEventListener('change', toggle);
});
function toggle() {
var options = document.getElementsByName('options[]'),
all = document.getElementById('checkbox-1-6');
if (this === all) {
Array.prototype.forEach.call(options, function(checkbox) {
checkbox.checked = all.checked;
});
} else {
all.checked = Array.prototype.every.call(options, function(checkbox) {
return checkbox.checked;
});
}
}
var options = document.querySelectorAll('.unsubscribe-checkbox');
Array.prototype.forEach.call(options, function(opt) {
opt.addEventListener('change', toggle);
});
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" />
<label for="checkbox-1-6"></label>All
<br>
<input type="submit" name="formSubmit" value="Unsubscribe" />
</form>
You may notice that I've removed the onClick attribute from the 'all' checkbox, in preference of unobtrusive JavaScript, where the event-handlers are assigned via the JavaScript itself (which ordinarily makes for more easily-maintained code, as the arguments to be passed to a given function are assigned in the code itself, rather than having to be separately updated in the HTML).
References:
Array.prototype.every().
Array.prototype.forEach().
document.getElementsByName().
document.getElementById().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().

check for empty radio input

I want to check if the user selects a radio button. I have coded this:
HTML
<form action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
//etc
<button type="submit" class="myButton" onclick="sendSuccess()">Submit</button>
</form>
JS
function sendSuccess(){
var len = document.formRate.ratingInput1.length;
var flag;
for(i=0; i<len; i++){
if (document.formRate.ratingInput[i].checked){
flag = true;
}
else{
flag = false;
break;
}
}
if(flag === false){
console.log('noooooo');
return false;
}else{
console.log('yesssss');
}
}
But its not working.

You can do it with jQuery using Attribute Equals Selector [name="value"] to find radio button with same name and :checked to get only checked elements. You can use length to check if you get any checked radio button or not. The length will be zero of none of radio button is checked and will be greater then zero if one or more radio button is checked.
Live Demo
if($('[name=ratingInput1]:checked').length)
console.log('Yes');
else
console.log('No');

Working demo http://jsfiddle.net/cXPYQ/
Hope this fit your needs :)
Code
$("form").submit(function () {
var flag = true;
$(':radio').each(function () {
name = $(this).attr('name');
if (flag && !$(':radio[name="' + name + '"]:checked').length) {
alert(name + ' group not checked');
flag = false;
}
});
return flag;
});

try this
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
function sendSuccess(){
var flag = false;
var len = $('input:radio[name="ratingInput1"]:checked').size();
if(len == 0){
console.log('noooooo');
flag = false;
}else{
console.log('yesssss');
flag = true;
}
return flag;
}

Its a simple form with radio buttons, so all you need is give the form a name formRate, and no need for jQuery, the following will work
HTML
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
Javascript
function sendSuccess() {
rating = document.forms["formname"]["ratingInput1"].value;
if(rating > 0){
console.log(rating);
}
else {
console.log('No rating');
}
return false;
}

var flag = $('[name="ratingInput1"]').is(':checked');
will return false if no radio with that name is chosen.

only select one checkbox

I would like to build a javascript so a user can choose only one option between the the mentioned below. Could you give me some pointers how to do this since I am a javascript noob.
Thank you!
This is the picture of the part of a menu
<td><label for="dock_books_search_visible_online"> Visible online?</label></td>
<td><input type="checkbox" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> </td>
<td><label for="dock_books_search_visible_online_yes"> Yes</label></td>
<td><input type="checkbox" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> </td>
<td><label for="dock_books_search_visible_online_no"> No</label></td>

For single selection from multiple options we use Radio Buttons not CheckBoxes.
You should use some thing like this.
<input type="radio" name="option" value="Yes" id="yes" />
<input type="radio" name="option" value="No" id="no" />
But still if you want to go the other way round, Just add the following script in your head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(':checkbox').bind('change', function() {
var thisClass = $(this).attr('class');
if ($(this).attr('checked')) {
$(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
}
else {
$(this).attr('checked', 'checked');
}
});
});
</script>
Here is the fiddle for above.
Hope this helps.

This looks like a job for radio buttons, not checkboxes.

you got a point to use radio buttons any way here is the javascript solution
i used it in my project when there is search criteria and search result in data grid by
ajax having 13 records when i check one record it disables the rest
code for javascript enable disable check boxes jsfiddle
<form name="mainForm" method="GET">
Visible online?
<input type="checkbox" name="option" value="checkedVisibleOk" id="option" onclick="changeCheckBox();"/>
yes
<input type="checkbox" name="option" value="checkedVisibleNok" id="option" onclick="changeCheckBox();"/>
no
</form>
<script>
var serNoChecked="";
function changeCheckBox() {
try {
var max = document.mainForm.option.length;
var count = 0;
for (var i = 0; i < max; i++) {
if (document.mainForm.option[i].checked == true) {
count++;
serNoChecked = i;
}
}
if (count == 1) {
for (var i = 0; i < max; i++) {
if (document.mainForm.option[i].checked == false) {
document.mainForm.option[i].disabled = true;
}
}
}
else if (count == 0) {
for (var i = 0; i < max; i++) {
document.mainForm.option[i].disabled = false;
}
}
if (null == max) return false;
if (count == 0) {
return true;
}
else if (count > 0) {
return false;
}
}
catch (e) {
alert(e.message);
}
}
</script>

Try using Radio Button's, Give them the same name to group them and only allow 1 to be selected:
<td>
<label for="dock_books_search_visible_online"> Visible online?</label>
</td>
<td>
<input type="radio" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" />
</td>
<td>
<label for="dock_books_search_visible_online_yes"> Yes</label>
</td>
<td><input type="radio" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" />
</td>
<td>
<label for="dock_books_search_visible_online_no"> No</label>
</td>
Check this JSFiddle.

Hi why are you using checkbox? Checkboxes are not for the functionality that you want. Radio buttons are exact what you want to use.
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
For further details look here

function toggle(chkBox, field) {
for ( var i = 0; i < field.length; i++) {
field[i].checked = false;
}
chkBox.checked = true;
}
<td>
<INPUT type="checkbox" name="xyz" onClick="toggle(this,document.myform.xyz);" value="${incident.incidentID}">
</td>

Use radio buttons and ensure that the name tag is consistent with all options and it'll automatically select just one w/o the need for additional code or JS.