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";
}
Related
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.
This is my first js script so be gentle with me :)
The problem is when I click on check all button, all checkboxes are checked but it won't write values to textarea, if I click individual checkboxes then the value is added/removed and that is ok, I'm just stuck on that check all/uncheck all button.
http://jsfiddle.net/LAcgE/74/
function check(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
var itemsAdded = Array();
function movetext(text) {
var i = itemsAdded.indexOf(text)
if ( i >= 0) {
itemsAdded.splice(i,1);
}
else {
itemsAdded.push(text);
}
document.getElementById("result").value=itemsAdded.join("\n");
}
<form action='#' method='post'>
<input type='checkbox' value='aaa' name="add" onclick='movetext(this.value)'/>a
<input type='checkbox' value='bbb' name="add" onclick='movetext(this.value)'/>b
<input type='checkbox' value='ccc' name="add" onclick='movetext(this.value)'/>c
<input type='checkbox' value='ddd' name="add" onclick='movetext(this.value)'/>d
<input type='checkbox' value='eee' name="add" onclick='movetext(this.value)'/>e
<input type="button" value="check all" onClick="check(this.form.add)">
<input type="button" value="uncheck all" onClick="uncheck(this.form.add)">
<textarea id="result" rows="8" cols="40"></textarea>
<input type="submit" value="Submit">
</form>
Replace your check and uncheck functions with this
function check(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = true ;
movetext(chk[i].value);
}
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = false ;
movetext(chk[i].value);
}
}
You just have to manually call the other method. I tried it in your fiddle.
You forget to call movetext() function in check() and uncheck() function.
Add this after you do check/uncheck:
movetext(chk[i].value);
my validation is work on only one radio button and all left radio button its not working here is my code
<script>
function xyz()
{
var x = document.getElementsByName("red");
//alert(x.length);
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}else{
alert("fe");
return false;
}
}
}
</script>
<form name="as" method="post" action="n.php">
<input type="radio" id="x1" name="red">
<input type="radio" id="x2" name="red">
<input type="radio" id="x3" name="red">
<input type="radio" id="x4" name="red">
<input type="submit" value="button" onclick="return xyz()">
</form>
You should try this.
function xyz()
{
var x = document.getElementsByName("red");
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}
}
// No radio button checked, return false.
return false;
}
Your function will return in either states after first run. To skip to next element of iteration you should use continue instead of return. See: http://www.w3schools.com/js/js_break.asp. To iterate threw all elements you shoul do:
for (var i=0; i<x.length; i++) {
if (x[i].checked) {
// Do something if checked
} else {
// Do something if not checked
alert("fe");
}
// Continue to next element
}
Try the following code:
<script type="text/javascript">
function validate()
{
var checked = null;
var inputs = document.getElementsByName('correct');
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked) {
checked = inputs[i];
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else
{
return confirm('Save As Correct Answer '+checked.value+'');
}
}
</script>
<form method="post" name="Form" onsubmit="return validate()" action="">
<input type="radio" name="correct" id="correct" value="A">
<input type="radio" name="correct" id="correct" value="B">
</form>
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[]'])">