|
JavaScript - Uncheck Checkboxes In A Form
I am using some code in a form to show an image if a checkbox is selected. A different image is shown for each checkbox.
The code works well, but I need some help to update the code so that only one of the four checkboxes can be selected at any one time. If one is checked and the user selects a different one, the original one should automatically untick and the associated image should change as well. To summarise, I want only one image and one checkbox to show at any one time (and it needs to be cross browser please). Here is the code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> <!-- function toggle(target) { obj=(document.all)? document.all[target] : document.getElementById(target); obj.style.display=(obj.style.display=='none')? 'inline' : 'none'; } //--> </script> </head> <body> <form> Selection 1 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header')" /><br> Selection 2 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header1')" /><br> Selection 3 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header2')" /><br> Selection 4 <input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header3')" /><br> </form> <img src="logo.jpg" border="0" alt="" id="header" style="display:none;" /> <img src="logo2.jpg" border="0" alt="" id="header1" style="display:none;" /> <img src="logo3.jpg" border="0" alt="" id="header2" style="display:none;" /> <img src="logo4.jpg" border="0" alt="" id="header3" style="display:none;" /> </body> </html> Similar TutorialsHello, I have a simple script that counts the number of check boxes that are checked and then when reaches a certain number displays an alert. It is triggered by the onclick event. My question is, by keeping with the onclick event how do I make JS run something different when a box is unchecked. So bottom line - if it is checked the counter goes up...if it is unchecked the counter goes down all being triggered by the onclick event - is this possible. Below is the code I have been working with. The only part that is working is the middle if statement - the part where it is checking to see if the counter is equal to 6 Code: // JavaScript Document
var count = 0
function checkedcount(which) {
if (which.checked = true;)
{count = count + 1}
if (count == 6)
{ alert('Only pick 5');
count = count - 1;
which.checked = false;
}
if (which.checked = false;)
{count = count - 1}
}
Is it possible to use Javascript to uncheck all checkboxes that appear within a specific div? I'm already using names/ids for each checkbox, and these are generated dynamically, so I cant really apply a group to all the checkboxes I want to untick. I'm trying to write some code that uses buttons to check and uncheck certain checkboxes. I am stumped and all the code I have been finding is using for loops to check or uncheck all the boxes, when I just want to check or uncheck certain ones. Here's an example of the type of function I'm trying to use: Code: function checkSome (form) {
document.myForm.list.one.checked = true;
document.myForm.list.two.checked = true;
document.myForm.list.three.checked = false;
}
And the button: Code: <input type="button" value="Option 1" onClick="checkSome(this.form)"/> Whats up guys, have an interesting one for you... So I have a pretty simple survey form, with 5 checkbox answers, one of them being "None of the Above". All 5 are part of the same question1[] array. My goal is to have a function that unchecks the other 4 boxes when None of the Above is checked. The problem is that since None of the Above is part of the question1 array, it unchecks itself. So how do I separate this None of the Above option? After all, it is still a valid answer to question 1, so I don't want it to sit in a different array just because... Here's what I have now: Java: Code: function SetValues(Form, CheckBox, Value)
{
var objCheckBoxes = document.forms[Form].elements[CheckBox];
var countCheckBoxes = objCheckBoxes.length;
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = Value;
}
html: Code: <input id="question1" name="question1[]" type="checkbox" value="Answer 1"> 1<br>
<input id="question1" name="question1[]" type="checkbox" value="Answer 2"> 2<br>
<input id="question1" name="question1[]" type="checkbox" value="Answer 3"> 3<br>
<input id="question1" name="question1[]" type="checkbox" value="Answer 4"> 4<br>
<input id="question1" name="question1[]" type="checkbox" value="None of the above" onclick="SetValues('form1', 'question1[]', false);"> None of the above <br>
So again the issue with this code is that since None of the Above is inside the question1 array, it unchecks itself as well. thanks, rg I have a question and I'm hoping someone may have some suggestions on how to solve. I found a script on this forum that does almost what I want from this thread: http://codingforums.com/showthread.php?t=184011 (thank you Philip M!) Instead of a dropdown, I'd like to have a list of names using check boxes, so that you have the option to send an email to one or all of the people. When you choose your selections and click submit, an outlook email will pop up with your selections in the to: field. Is this possible? Here's the solutuin using a drop down, this works (and works well), but doesn't quite do what I need : <form name="Contact_Us" id="contact" method="post" enctype="text/plain" onsubmit = "getEml()"> <fieldset id="selection"> Who would you would like to email: <select name = "sel"> <option value="email1@email.com" >email 1</option> <option value="email2@email.com" >email 2</option> <option value="email3@email.com" >email 3</option> </select> <input type = "submit" value = "Submit the form"> </form> <script type = "text/javascript"> function getEml() { var emailaddress = document.Contact_Us.sel.value; window.location = "mailto:" + emailaddress; } </script> Is there a way to use checkboxes but to do the same thing? <INPUT TYPE=CHECKBOX NAME="name1@email.com">name 1<BR> <INPUT TYPE=CHECKBOX NAME="name2@email.com">name 2<BR> <INPUT TYPE=CHECKBOX NAME="name3@email.com">name 3<BR> this is my js for all checkbox to be check and uncheck all the item. when i have several item to be checked, it successfully check all with the function. but the problem is when i have only 1 item in the list to be checked. it will not check all or uncheck all when i click the check all function. pls advice. Code: <script language="JavaScript">
<!--
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = 1 ;
}
function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = 0 ;
}
// End -->
</script>
Hi all Can someone please help me with a javascript that can validate textfields, checkboxes, radiobuttons and dropdownlist? I found a working javascript, but it only validates textfields. http://www.insidedhtml.com/tips/elements/ts13/page1.asp Can someone please help me modify it? Any help is much appreciated! - Mikey I have the following page www.crownvalleywinery.com/kiosk/default.html and I would like to add a button or checkbox to check/uncheck all. Note we are already using some javascript for custom checkboxes so it needs to integrate with that. Any help is appreciated. Here is the current javascript... Code: /*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.
Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.
You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.
Visit http://ryanfait.com/ for more information.
*/
var checkboxHeight = "47";
var radioHeight = "25";
var selectWidth = "190";
/* No need to change anything after this */
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
document.onmouseup = Custom.clear;
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.choose;
}
}
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
how to copy some text to the clipboard with jquery or javascript, from google. i know there is a pludgin named zeroclipboard http://code.google.com/p/zeroclipboard/ can do this with cross browers. when i tested it on my site. i set it to copy text optionally . it can't work. my test link is http://xanlz.com/copy/1.html it always copys all the values. even i uncheck some check box. may be the value doesn't be changed. but when i alter() the variable, the value is ok. how to correct it? thank you. i want it can copy the checked box value. if the box unchecked, then don't copy its value. Hi all. I have the following problem that I require a pointer with. I have a php variable named "$seatid" This could contain 1 or many entries. I have a page full of checkboxes named A1-8, B1-8, C1-8 etc to P1-8 I want a way of greying out the checkboxes on the page that relate to the values that are contained in the php variable. So they cannot be clicked. It would also like to change the colour of the cell that the check box is contained in. It is important that the checkboxes or at least the table that contain the checkboxes remain, as it represents the layout of a theatre. Cheers for your help All, I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this? Code: function validate(field)
{
for (var i = 0; i < field.length; i++){
if(field[i].checked){ // if a field is checked form is submitted
return true;
}
}
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}
Thanks in advance! Good evening all, I have a bit of an issue with checkboxes - basically I need to allow only 1 selection and then have a comments box show when a checkbox is checked. I've gotten the comments box to show when the checkbox is checked but I can't seem to workout how to allow only one. I'd really like the user to be able to change their mind and make a different selection but only have 1 be selected at a time (sort of like radio buttons work). I know it would be much easier and probably better to use radio buttons but that isn't an option with this. (The actual HTML is produced using a style sheet in an application that I am interfacing with so all I can do is use the checkbox.) Here is the code I am using to show or hide the comments box. Code:
function HideComments()
{
var a1 = document.getElementById("crmForm_answer1").checked;
var a8 = document.getElementById("crmForm_answer8").checked;
var a2 = document.getElementById("crmForm_answer2").checked;
var a3 = document.getElementById("crmForm_answer3").checked;
var a4 = document.getElementById("crmForm_answer4").checked;
var a5 = document.getElementById("crmForm_answer5").checked;
var a6 = document.getElementById("crmForm_answer6").checked;
var a7 = document.getElementById("crmForm_answer7").checked;
var a9 = document.getElementById("crmForm_answer9").checked;
var a10 = document.getElementById("crmForm_answer10").checked;
if(a1==true)
{
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';
if(a8==true)
{
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';
if(a2==true)
{
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';
if(a3==true)
{
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';
if(a4==true)
{
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';
if(a5==true)
{
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';
if(a6==true)
{
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';
if(a7==true)
{
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';
if(a9==true)
{
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';
if(a10==true)
{
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
}
else
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}
Thanks in Advance Sam My form generates 1 to n records which contains check boxes. Based on some condition if I click a check box it has to check & disable some other check boxes automatically. I did it. But, at the same time if I un-check I have to un-check all the check boxes which were checked. Please let me know. Thanks a lot.
have a simple calculator i made with checkboxes and some Js. the problem is that it does not work in FF. any idea how this can work for IE Safari AND FF Code:
function getPrice(amount, boxName){
total = eval() ;
checked = document.getElementById(boxName).checked
if (checked){
total = parseFloat(form1.Total2.value) + parseFloat(amount);
}else{
total = parseFloat(form1.Total2.value) - parseFloat(amount);
}
total.toFixed(2);
form1.Total2.value = total
document.getElementById("total").innerHTML = "Total $"+total;
}
Hello. How can you modify this code so that if you click a checkbox that is ALREADY CHECKED, it will remain checked? By the way, I have searched the web on how to do this and the general consensus seems to be "use radio buttons instead", but I would not like to use radio buttons. I would like to use checkboxes, I think they look better for what I am trying to do. Thanks for any help Code: <input type="checkbox" id="ckbox1" onclick="if(this.checked){ document.myform.ckbox1.checked=true; document.myform.ckbox2.checked=false; document.myform.ckbox3.checked=false;}" checked="checked" />Best Match
<input type="checkbox" id="ckbox2" onclick="if(this.checked){ document.myform.ckbox1.checked=false; document.myform.ckbox2.checked=true; document.myform.ckbox3.checked=false;}" />All Words
<input type="checkbox" id="ckbox3" onclick="if(this.checked){ document.myform.ckbox1.checked=false; document.myform.ckbox2.checked=false; document.myform.ckbox3.checked=true;}" />Exact Phrase
I am trying to get a link that when clicked it will check all the checkboxes in my form. My problem is that my values are stored in an array: <INPUT TYPE=\"checkbox\" name=\"emailArray[]\" value=\"$email\"> print"<br><a href=\"#\" onClick=\"checkAll()\">check all</a><br>"; Here is my javascript function : function checkAll(){ alert('hi'); var df = document.selectEmailForm.elements; for (var i = 0; i < df.length; i++) { if (df[i].name == "emailArray[]" ) { document.selectEmailForm.emailArray[i].checked=true; } } } Any ideas? Any help is greatly appreciated. Thanks for your time! irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on. There are 3 different classes per hour. i thought doing this using javascript, but i'm absolutely lost. Can you please give me a hint on how to do this? Thanks!! this is the part of the form that has the checkboxes. <form method="post" action="process.php"></form> <input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br> <input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br> <input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br> <input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br> <input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br> <input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br> <input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br> <input type="checkbox" value="122" name="convention8"> 12 am: Open table<br> <input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br> <input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br> <input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br> <input type="checkbox" value="141" name="convention12"> 2 pm<br> <input type="checkbox" value="142" name="convention13"> 2 pm<br> <input type="checkbox" value="143" name="convention14"> 2 pm<br> <input type="checkbox" value="151" name="convention15"> 3 pm<br> <input type="checkbox" value="152" name="convention16"> 3 pm<br> <input type="checkbox" value="153" name="convention17"> 3 pm<br> <input type="submit"></input> </form> Hi Guys, I'm currently working on a page working with separate categories and a whole lotta check boxes. My objective is to have one checkbox deselect the other checkboxes in its category without interfering with the rest. How would I go about doing this assuming the id tag is already in use and differs per tag? I was thinking about cycling through all checkbox tags and sorting them out via class but I'm looking for something possibly more efficient. I have a group of checkboxes named "list[]". I want to validate that at least one is checked. How can I do this?
i'm using http://www.javascript-coder.com/html...lidation.phtml now I want to know how to validate a checkbox if i have <input type=checkbox id="c2" name=33>dd <input type=checkbox id="c2" name=33>ff.aa <input type=checkbox id="c2" name=33>ddd is it correct to have them all with the same id and how do I validate it using this validation routine? (or if this one doesn't work is there a specific validation functions -your can recommend that are easy to use for all different types of input) |
|||||||