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.
Related
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
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";
}
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>
I found this code for select/unselect all checkboxes. It works. In each input has a name=list, I want that this code works with the name=list[]
When I change this option in the button in JavaScript appears error:
<input type=button value="Check All" onClick="this.value=check(this.form.list[])">
This is the original code:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
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"; }
}
// End -->
</script>
<center>
<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><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">SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>
</form>
</center>
Read more about all by www.netevolution.co.uk
Is it possible?
<input type=button value="Check All" onClick="this.value=check(this.form['list[]'])">
my html code-
<form method="post" name="editorform" id="editorform" onsubmit="return validate_editorform(this)" action="#">
<ol><li>
<label for="qtitle"><b>Title</b></label>
<input id="qtitle" name="qtitle" class="text"></textarea>
</li><li>
<label for="tag"><b>Tag</b></label>
<table border="0">
<tr>
<td><input type="radio" name="tag" value="art"/>Art & Living</td>
<td><input type="radio" name="tag" value="travel" class="rdbtn"/>Travel</td>
<td><input type="radio" name="tag" value="religion" class="rdbtn"/>religion</td>
</tr>
.....
my javascript-
function validate_editorform(editorform)
{
var qtitle = editorform.qtitle.value;
var tag = editorform.tag.value;
var question = editorform.question.value;
var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(qtitle == "") {
inlineMsg('qtitle','You must enter a Question title.',5);
return false;
}
if(editorform.tag.checked == "") {
inlineMsg('tag','You must Tag your question.',5);
return false;
}
if(question == "") {
inlineMsg('question','You must enter a your Question.',5);
return false;
}
}
For qtitle and question JavaScript is working fine but for radio button (tag) it isn't. Can anyone identify the problem?
Change
if(editorform.tag.checked == "") {
to
if(tag == "") {
if(editorform.tag[0].checked == False... and so on for tag[1]...)
<html>
<head>
<title>Validating Radio Button</title>
<script>
select = ""
len = document.myform.radioname.length
for (i = 0; i <len; i++) {
if (document.myform.radioname[i].checked) {
select = document.myform.radioname[i].value
}
}
if (select == "") {
alert("No Option selected");
return false;
}
else {
alert("option selected");
return true;
}
</script>
</head>
<body>
<form name="myform" action="thankyou.html" onsubmit="return validateForm()" method="post">
Choose your favourite Car Brand
<input type="radio" name="radioname" value="maruti">Maruti<br>
<input type="radio" name="radioname" value="fiat">Fiat<br>
<input type="radio" name="radioname" value="BMW">BMW<br>
<input type="radio" name="radioname" value="jaguar">Jaguar<br>
</form>
</body>
</html>