Updating Select All/Deselect All Checkbox - javascript

The following code works fine when selecting all checkboxes, however it uses the the input type of button. How could i change this into an anchor (eg. like a link) instead of an input type of button. This needs to update to UnCheck All once all are selected. I have tried using the innerHTML placing it within a DIV, however have not been successful. I would be grateful for any help like always.
Many thanks
<script language="JavaScript">
function Check(chk)
{
if(document.myform.Check_All.value=="Check All"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.myform.Check_All.value="UnCheck All";
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.myform.Check_All.value="Check All";
}
}
// End -->
</script>
<form name="myform" action="checkboxes.asp" method="post">
<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>
<input type="button" name="Check_All" value="Check All" onClick="Check(document.myform.check_list)">
</form>

I first thought up of a quick answer but then I noticed that this will suck pretty badly
because it's completely braindead if someone manually ticks the checkboxes.
<form name="myform" action="checkboxes.asp" method="post">
<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>
</form>
<div id="checker">Check All</div>
<script type ="text/javascript">
//The toggle code for the div itself
$("#checker").bind("click", function() {
var toggleState = !! jQuery.data(this, "togglestate");
$(document.myform.check_list).each(function() {
this.checked = !toggleState;
});
$(this).text(toggleState ? "Check All" : "UnCheck All");
jQuery.data(this, "togglestate", !toggleState);
});
//Keep track of manual ticking of the checkboxes
//- if all checkboxes are ticked manually, change to uncheck all
//- if all checkboxes are unticked manualy, change to check all
$(document.myform).delegate("input[name=check_list]", "change", function() {
var curState, prevState, fullStateChange = true;
//Iterate through the checkboxes to see if all are unticked or if all are ticked
$(document.myform.check_list).each(function() {
curState = this.checked;
if (prevState != null && prevState !== curState) {
fullStateChange = false;
}
prevState = curState;
});
//Return as some were ticked and some were not
if (!fullStateChange) {
return;
}
$("#checker").data("togglestate", curState).text(!curState ? "Check All" : "UnCheck All");
});
//React to initial state of the checkbuttons
$(document.myform.check_list).trigger( "change" );
</script>
Demo
http://jsfiddle.net/rBaUM/2/

<script language="JavaScript">
function Check(chk){
var checkedVal = document.getElementById("Check_All");
if(checkedVal.innerHTML=="Check All"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
checkedVal.innerHTML = "UnCheck All";
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
checkedVal.innerHTML = "Check All";
}
}
</script>
<form name="myform" action="checkboxes.asp" method="post">
<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>
Check All
</form>

I'm not sure if that's what you're asking for, but using non-button is like
<div onclick="Check(document.myform.check_list)">Check All</div>

Related

how to count check checkboxes in a specific div JAVASCRIPT

I would like to alert the amount of check boxes that are checked in a specific div (not the ones in the <head>!), here is the code :
HTML
<div class="changer">
<label><input id="mode" type="checkbox" name="mode" value="Mode" onclick="mode()" />Mode</label><br />
<label><input id="map" type="checkbox" name="map" value="Map" onclick="map()"/>Map</label><br />
<label><input id="joueurs" type="checkbox" name="joueurs" value="Joueurs" onclick="joueurs()" />Joueurs</label><br />
<label><input id="points" type="checkbox" name="points" value="Points" onclick="points()" />Points</label><br />
</div>
</head>
<body>
<div id="text">
</div>
</body>
<button id="send" onclick="send()">Envoyer</button>
Javascript
function joueurs() {
if((document.getElementById("joueurs").checked == true)) {
joueursall.style.display = 'inline';
text.style.display = 'inline';
}
else {
if((document.getElementById("mode").checked == true)) {
modeall.style.display = 'none';
document.getElementById('mode').checked = false;
}
joueursall.style.display = 'none';
text.style.display = 'none';
}
}
document.getElementById("playerlist").addEventListener("change", function() {
var selected = this.value;
document.getElementById("text").innerHTML = "";
var html = '';
for (var i = 0; i < selected; i++) {
html += '<div class="grpjoueur"> <span class="sub-text">Player</span> <label><input type="checkbox" name="botbot" value="BOT"/>BOT</label </div>';
}
document.getElementById("text").innerHTML = html;
});
Here is the Javascript, it adds 'Joueurs' Dropdownlist if Joueurs is checked and then pop X times something, including a check box, according to the number selected in the Dropdownlist in the #text div
I tried multiple things but always return 0 or all the checkboxes...
In vanilla JS you can use querySelectorAll to query the checkboxes, and then .length to get the number of checkboxes.
var checkboxes = document.querySelectorAll("input[type='checkbox']");
alert(checkboxes.length);
CodePen Demo
If you want to alert only the length of the checked checkboxes, you can query them like this:
var checkedInputs = document.querySelectorAll("input:checked");
alert(checkedInputs.length);
CodePen Demo
when you click on the button, it will alert the number of checked boxes

Checkbox select deselect all and perform function

I have a bunch of checkboxes that when clicked pass their value to a text area. I then have a checkbox that when clicked selects all the other checkboxes. This is all working fine. What I would like to do is have the checkboxes perform their functions when select all is clicked. It works at the moment, but only when I refresh the page. I would like it to happen when select all is clicked.
Here's what I've been playing with so far:
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++)
$('.checkbox').each(function() {
this.checked = true;
this.click();
});
{
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
If you're already using jQuery, you could do it without loops, with jQuery's .on()/.trigger()/.change():
var $result = $('.js-result');
var $checkboxes = $('.js-checkbox');
$checkboxes.on('change', function(e) {
var $checkbox = $(e.target);
$result.append(
'<div>' +
$checkbox.closest('.js-label').text() + ' is ' +
($checkbox.prop('checked') ? 'checked' : 'unchecked') +
'</div>'
);
});
$('.js-button').on('click', function() {
var $this = $(this);
$checkboxes.prop('checked', !$this.data('checked'));
$checkboxes.trigger('change');
$this.data('checked', !$this.data('checked'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="js-label">
<input type="checkbox" class="js-checkbox"/>
Checkbox 1
</label>
<label class="js-label">
<input type="checkbox" class="js-checkbox"/>
Checkbox 2
</label>
<label class="js-label">
<input type="checkbox" class="js-checkbox"/>
Checkbox 3
</label>
<button type="button" class="js-button">Check/uncheck all</button>
<div class="js-result"></div>
JSFiddle
CheckBox should be handled with onchange event.
Below code I am firing an event whenever the checkbox checked programmatically.
Below code may help you
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++)
$('.checkbox').each(function() {
this.checked = true;
/* this.click(); */
this.fireevent('onChange');
/* or you can call this.onChange(); */
});
{
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
In case you are using only java script.
Below is the very simple running example. which consumes short time without any use of external library as JQuery
HTML code
<html>
<head>
<title>test</title>
<script>
function amend(a)
{
document.getElementById("ta").value += a;
}
function checkAll()
{
var textboxes = document.getElementsByClassName("cb");
for(i=0;i<textboxes.length;i++)
{
textboxes[i].checked=true;
textboxes[i].onchange();
}
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="ta">
Below the outputs
</textarea>
<div id="checkdiv">
<input type="checkbox" onChange="amend(this.value)" value="data to add 1" class="cb">First</input>
<br>
<input type="checkbox" onChange="amend(this.value)" value="data to add 2" class="cb">Second</input>
<br>
<input type="checkbox" onChange="amend(this.value)" value="data to add 3" class="cb">Third</input>
<br>
<input type="checkbox" onChange="checkAll()">Check all</input>
</div>
</body>
</html>

show and hide div based on checkbox selection using javascript

Hi I have a requirement for hiding and displaying the division based on checkbox selection. Currently I have to show and hide 10 division and 10 checkbox is provided for that. Also there should be on checkbox selet all which will check all the checkbox and all 10 div should be displayed. Once user will click select all it should now change to deselect all to deselect all.Once de select all is clicked it will deselect all checkbox and no division should be displayed. Kindly provide me javascript solution not jquery.
Here is the code
<html>
<head>
<script type="text/javascript">
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
checkflag = "true";
return "Uncheck All";
} else {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}
function ShowHideDiv(chkPassport) {
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
</script>
</head>
<body>
<form name=myform action="" method=post>
<table>
<tr>
<td><strong>Make a selection</strong><br> <input
type=checkbox name=list id="chkPassport"
onclick="ShowHideDiv(this)" value="1">Java<br> <input
type=checkbox name=list value="2">JavaScript<br> <input
type=checkbox name=list value="3">ASP<br> <input
type=checkbox name=list value="4">HTML<br> <input
type=checkbox name=list value="5">SQL<br> <br> <input
type=button value="Check All"
onClick="this.value=check(this.form.list)"></td>
</tr>
</table>
<div id="dvPassport" style="display: none">
Passport Number: <input type="text" id="txtPassportNumber" />
</div>
</form>
</body>
</html>
You can do so by the following jQuery code:
$('.checkbox').click(function() {
if( $(this).is(':checked')) {
$("#yourdiv").show();
} else {
$("#yourdiv").hide();
}
});
Change the #yourdiv - and .checkbox to your CSS identifiers.

Uncheck the mark in disabled checkbox in html

I have list of check boxes, In that i disabled one checkbox i.e.SQL.
When i click on select all button, all the checkbox getting selected.
Instead i need to select all checkboxes except the disabled one.
Please find the below snapshots.
currently its showing as in fig 1. I am expecting like in fig 2.
Please find the code below.
<script type="text/javascript">
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
checkflag = "true";
return "Uncheck All";
} else {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}
</script>
<form name=myform action="" method=post>
<table>
<tr><td>
<strong>Make a selection</strong><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5" disabled="true" >SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>
</form>
Please help me.
Thanks in Advance.
jsBin demo
This is all you need
function check(field) {
var io = field.io ^= 1; // Toggle flag
for (i=0; i<field.length; i++)
if(!field[i].disabled) field[i].checked = io;
return io ? "Uncheck All" : "Check All";
}

Checking if all my Radio Buttons are filled

I need to figure out how to check that my radio buttons are all filled. This is what I have but it only checks one button
var btns = form.choice_1;
for (var i=0; el=btns[i]; i++) {
if (el.checked) return true;
}
alert('Please select a radio button');
return false;
This is the form that I am taking input from.
<form onsubmit="return checkRadios(this);" name = "form" action = "like.php" method ="post" >
<h1> Questions </h1>
<p> Question 1 </p>
<input type="radio" name="choice_1" value="1">Like <input type="radio" name="choice_1" value="2" > Dislike
<p> Question 2 </p>
<input type="radio" name="choice_2" value="1">Like <input type="radio" name="choice_2" value="2" > Dislike
<p> Question 3 </p>
<input type="radio" name="choice_3" value="1">Like <input type="radio" name="choice_3" value="2" > Dislike
<p> Question 4 </p>
<input type="radio" name="choice_4" value="1">Like <input type="radio" name="choice_4" value="2" > Dislike
<br> <br>
<input type="submit" value="Submit">
Any help is appreciated.
Try this:
var checkRadios = function () {
var btns = form.querySelectorAll('input[name^=choice_][type="radio"]');
for (var i = 0; i < btns.length; i = i + 2) {
var check = true;
if (!btns[i].checked && !btns[i + 1].checked) check = false;
}
if (!check) alert('Please select a radio button');
return check;
}
var form = document.querySelector('form[name="form"]');
form.onsubmit = checkRadios;
Fiddle
You should use jQuery for this. It makes it much easier.
You would do it like this:
var e = ('#[[[[id of your radio]]]]');
if($e.is(':checked'){
//do what you need to
};
Try this. You will need jQuery.
checkRadios = function() {
if $("input:radio :checked").length == 0 {
alert('Please select a radio button');
return false;
}
}

Categories

Resources