Query regarding checkboxes in JavaScript - javascript

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[]'])">

Related

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.

How to fill textbox using radio button

I have a code with button Click. When i click text appears in textbox. It woks. But i have a problem to write anoter type of code. I want to fill the textbox using radio buttons but without button Click. So when I click in a radio I want to show text in textbox. Here is my code.
<script type="text/javascript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
var TestVar3 = form.input[2].checked;
var TestVar4 = form.input[3].checked;
if (TestVar1 == true) {
form.textbox.value = "Earth is...";
} else if (TestVar2 == true){
form.textbox.value = "Mars is...";
} else if (TestVar3 == true){
form.textbox.value = "Jupiter is...";
} else if (TestVar4 == true){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>
To do that on clicking radio butttons a way could be this:
<input type="radio" name="input" onclick="check_value(this.value)" value="Earth" />Earth<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Mars"/>Mars<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Jupiter"/>Jupiter<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Saturn"/>Saturn<p>
and js:
function check_value(txt){
document.form.textbox.value = txt + " is...";
}
See if is this you want.
<script type="text/javascript">
function check_value (value,form) {
if (value == 0) {
form.textbox.value = "Earth is...";
} else if (value == 1){
form.textbox.value = "Mars is...";
} else if (value == 2){
form.textbox.value = "Jupiter is...";
} else if (value == 3){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0,this.form)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1,this.form)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2,this.form)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3,this.form)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>

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";
}

Check All won't work in Chrome but works in Firefox

I have a Check All box wherein when the user will tick it, all the items under it will be ticked. It works fine in Firefox but won't perform the Check All function in chrome.
This is the JS function:
function Check(chk, num)
{
if(chk.value=="Check all"){
for (i = 0; i <= num; i++){
chk[i].checked = true ;
}
chk.value="UnCheck all";
}else{
for (i = 0; i <= num; i++){
chk[i].checked = false ;
}
chk.value="Check all";
}
}
HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">
<input type="checkbox" value="Check all" onclick="Check(document.myform.Product A, 9)" id="Fujitsu" name="Fujitsu"> Select All
<input type="hidden" value="1" name="product_id[1]">
<input type="checkbox" value="Product 1" id="Product 1" name="product[1]">Product A -Product 1
<input type="hidden" value="2" name="product_id[2]">
<input type="checkbox" value="Product 2" id="Product 2" name="product[1]">Product A -Product 2
</form>
For me both Firefox and Chromium crash on "document.myform.Product A". Here is your code a little modified to work:
function Check(form, all, chk, num)
{
if(form[all].value=="Check all"){
for (i = 1; i <= num; i++){
form[chk + i].checked = true ;
}
form[all].value="UnCheck all";
}else{
for (i = 1; i <= num; i++){
form[chk + i].checked = false ;
}
form[all].value="Check all";
}
}
and HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">-
<input type="checkbox" value="Check all" onclick="Check(document.myform, 'Fujitsu', 'Product_' , 2)" id="Fujitsu" name="Fujitsu"> Select All-
<input type="hidden" value="1" name="product_id[1]">-
<input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
<input type="hidden" value="2" name="product_id[2]">-
<input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>
But you can do cleaner code to do the same thing:
function Check(form, action)
{
var l = form.getElementsByTagName("input");
for (var i = 0; i < l.length; ++i)
if (l[i].type == "checkbox") l[i].checked = action;
}
and HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">-
<input type="checkbox" value="Check all" onclick="Check(document.myform, this.checked)" id="Fujitsu" name="Fujitsu"> Select All-
<input type="hidden" value="1" name="product_id[1]">-
<input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
<input type="hidden" value="2" name="product_id[2]">-
<input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>
It would be even better if you used a library with CSS selectors like jQuery.

how to validate radio buttons in javascript?

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>

Categories

Resources