JavaScript - Help With Changing Label Class For Checkbox
Hi everyone.
I am unfortunately stuck, and must admit myself defeated by my inferior javascript knowledge. I would really love some sort of javascript observer to automatically add/remove a class to the labels on my page, depending on wether their checkboxes are checked or not. As well as adding those same CSS-classes to the checkboxes already checked on document load. This would be possible in javascript, wouldn't it? Similar TutorialsI am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = []; var radiolist = []; var labelspans = []; var labels = []; var radios = []; var count; var spans = document.getElementsByTagName('span'); function getLabels() { for (x=0; x<spans.length; x++) { if (spans[x].className == "LabelWrapper") { labelspans.push(spans[x]); } } for (y=0; y<labelspans.length; y++) { labels.push(labelspans[y].firstChild); radioname.push(labelspans[y].firstChild.htmlFor); } } function getRadios() { //will put all radio groups into the "radiolist" array for (z=0; z<radioname.length; z++) { radiolist.push(document.getElementsByName(radioname[z])); //will add Event Listener to each radio button, and add each one to the "radios" array for (i=0; i<radiolist[z].length; i++) { chkradio = radiolist[z][i]; chkradio.setAttribute("count",Number(z)); chkradio.addEventListener("click", function(){changeLabel()}, false); radios.push(chkradio); } } } function changeLabel() //loops through all the radios to check if they are selected, and changes label color accordingly { for (w=0; w<radios.length; w++) { if (radios[w].checked) { a = radios[w].getAttribute("count"); labels[a].innerHTML = labels[a].innerHTML.fontcolor("green"); } } } getLabels(); getRadios(); This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Hi guys. I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default). When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again. Code: <script type="text/javascript"> function toggledisplay(category){ if(document.getElementById(category).checked){ $("."+category).removeClass(category+"-hidden").addClass(category); } else{ $("."+category).addClass(category+"-hidden").removeClass(category); } } </script> <input type="checkbox" checked="checked" name="fitness" id="fitness" onclick="toggledisplay('fitness')" /> Hi guy not the greatest with javascript i use it now and then. so far i have this code working correctly. Currently on mouse-over its changes the img background of imgholder. this is the HTML Code: <div id="imgholder"> </div> <div id="myController2"> <span class="jFlowControl2">No 1 </span> <span class="jFlowControl2">No 2 </span> </div> <div id="mySlides2"> <div> <a onmouseover="changeImg(this, 'img2.jpg');" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a> <a onmouseover="changeImg(this, 'img3.jpg');" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a> <a onmouseover="changeImg(this, 'img4.jpg');" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a> <a onmouseover="changeImg(this, 'img5.jpg');" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a> <a onmouseover="changeImg(this, 'img1.jpg');" class="pt" href="penetration.htm" title="Penetration Testing"> </a> <a onmouseover="changeImg(this, 'img6.jpg');" class="as" href="application.htm" title="Application Security"> </a> <!--span class="jFlowNext2 NextFlash"> </span--> </div> <div> <!--span class="jFlowPrev2 BackFlash"> </span--> </div> </div> </div> This is the script Code: <script language="javascript" type="text/javascript" src="inc/js/changeImg.js"></script> function changeImg(e, imgName) { URL_prefix = 'http://www.website.co.uk/surecloud'; // set image url image_url = new Array(); image_url[0] = URL_prefix+"/images/img1.jpg"; image_url[1] = URL_prefix+"/images/img2.jpg"; image_url[2] = URL_prefix+"/images/img3.jpg"; image_url[3] = URL_prefix+"/images/img4.jpg"; image_url[4] = URL_prefix+"/images/img5.jpg"; image_url[5] = URL_prefix+"/images/img6.jpg"; preload_image_object = new Array(); for(var i = 0; i < image_url.length; i++) { preload_image_object[i] = new Image(); preload_image_object[i].src = image_url[i]; } document.getElementById('imgholder') .style.background="transparent url('images/" + imgName + "') no-repeat"; } currenly if you hover over any of the <a> a css class is applied css code Code: #flash a.grc:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(../../images/animated_nav.gif) no-repeat scroll -148px -59px; } what i need to do is keep this class applied over the last <a> that is hovered. so what i would like to do is change the class of the last <a> hover so it stays active until another one is hovered. does this make sense? any help or guidance would be appreciated I'm trying to add a body class of 'day' if it's 6am-5pm and 'night' if it's 5pm-6am based on the user's local time. I tried the following but it didn't work. Any ideas? In the <head> Code: <script> function setTimesStyles() { var currentTime = new Date().getHours(); if(currentTime > 5 && currentTime < 17) { document.body.className = 'day'; } else { document.body.className = 'night'; } } </script> Code: <body onload="setTimeStyles();"> Also, is there a more elegant way to achieve what I need? Hello, I need your help. I am using the code below to attempt to get the text or label value of the drop down box, however, what I am not liking is that it is returning a number of the selected item, as opposed to the text value. Code: document.getElementById('status').value How can I get just the text value of the selected item in question? Much thanks and appreciation for all your help. Cheers, J Hello, I have a coding project that I am working on, and I have gotten stumped. Basically win the page loads I want to show random numbers in two textboxes or labels, I would prefer labels. What this is going to be used for is...it is suppose to be for a math learning tool for first, second and third graders. Also another question is that I am suppose to give them digits based upon their grade level. So for first grade 1+1=2 second grade 2 digits, third 3 digits but can have a four digit answer. Plus it can't have negative numbers, nor have remainders for division. Also I don't want to use buttons if at all possible I want the numbers to load automatically. I know this is a loaded question and I have worked tons on it, for me its trying to get the last few things to work together that's giving me trouble. If you would like to see sections of my code please ask cause it is tons as of right now. Thanks for your help. Hello All, Below is my code, I am needing to get to where the label name will match the behavior that my field currently does. If nothing is entered the field is changed to a red background. If it is focused it goes back to white. I am needing the font color of the label to match color of the field and match the same behavior. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lab06 - Form Validation</title> <script type="text/javascript" charset="utf-8"> function passcheck(){ var pw1 = document.forms[ 0 ].password.value; var pw2 = document.forms[ 0 ].passcomf.value; if ( pw1 != pw2 ) { alert ("You did not enter the same new password twice. Please re-enter your password."); return false; }else{ return true; } } function validate( ) { var errors = new Array( ); for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){ if( document.forms[ 0 ].elements[ i ].type == "text" ) { if( document.forms[ 0 ].elements[ i ].value == "" ){ errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n"); document.forms[ 0 ].elements[ i ].className = "in_error"; } } if( document.forms[ 0 ].elements[ i ].type == "select-one") { if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) { errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n'); document.forms[ 0 ].elements[ i ].className = "in_error"; } } if( document.forms[ 0 ].elements[ i ].type == "select-one") { if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) { errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n'); document.forms[ 0 ].elements[ i ].className = "in_error"; } } } if( errors.length == 0 ) { return true; } else { clear_errors( ); show_errors( errors ); return false; } } function clear_errors( ){ var div = document.getElementById( "errors" ); while( div.hasChildNodes( ) ){ div.removeChild( div.firstChild ); } } function show_errors ( errors ) { var div = document.getElementById( "errors" ); for( var i = 0; i < errors.length; i++ ){ var error = document.createTextNode( errors[ i ] ); var p = document.createElement( "p" ); p.appendChild( error ); div.appendChild( p ); } } window.onload = function( ) { document.forms[ 0 ].onsubmit = validate; } </script> <style type="text/css" media="screen"> #errors { color: #F00; } .in_error { background-color: #F00; } input:focus { background-color: #FFF; } select:focus { background-color: #FFF; } </style> </head> <body> <h1>Form Validation</h1> <div id="errors"></div> <form action="" method="post" onsubmit="return passcheck()"> <p> <label for="firstname" id="labelfirstname">First name:</label> <input type="text" name="First name" value="" id="firstname" /> </p> <p> <label for="lastname" id="labellastname">Last name:</label> <input type="text" name="Last name" value="" id="lastname"/> </p> <p> <label for="middlei" id="labelmiddlei">Middle initial:</label> <input type="text" name="Middle initial" value="" id="middlei"/> </p> <p> <label for="address" id="labeladdress">Street address:</label> <input type="text" name="Street address" value="" id="address"/> </p> <p> <label for="city" id="labelcity">City:</label> <input type="text" name="City" value="" id="city"/> </p> <p> <label for="State" id="labelstate">State:</label> <input type="text" name="State" value="" id="state"/> </p> <p> <label for="zipcode" id="idzipcode">Zipcode:</label> <input type="text" name="Zipcode" value="" id="zipcode"/> </p> <p> <label for="username" id="labelusername">Username:</label> <input type="text" name="Username" value="" id="username"/> </p> <p> <label for="password" id="labelpassword">Password:</label> <input type="text" name="Password" value="" id="password"/> </p> <p> <label for="passcomf" id="labelpasscomf">Password comfirmation:</label> <input type="text" name="Password comfirmation" value="" id="passcomf"/> </p> <p> <label for="agreement" id="labelagreement">User Agreement</label> <select name="User Agreement" id="agreement"> <option></option> <option>Yes, I agree!</option> <option>No, I do not agree!</option> </select> </p> <p><input type="submit" value="Register →" onclick="return passcheck(); return true;"/></p> </form> </body> </html> So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() { this.elements = new Array; } function derivedClass() { } derivedClass.prototype = new baseClass; Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass(); a.elements.push("A"); a.elements.push("B"); b = new derivedClass(); b.elements.push("C"); b.elements.push("D"); When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass(); a.elements.push("A"); a.elements.push("B"); b = new baseClass(); b.elements.push("C"); b.elements.push("D"); then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h Hi, I have a checkbox and when I "check" I want to add a <p> inside of an <div> and when I "uncheck" I want to remove the <p> from <div>. I've tried this but it's not working Code: $('#checkbox').change(function(){ $('div').html('<p>Some Text</p>'); }, function() { $('div').remove('<p>Some Text</p>'); }); I hope you can help.. Regards Looking for a simple method to Toggle textbox yes/no using CheckBox This example does not work! But I hope this will help explain what I am trying to do Code: <SCRIPT LANGUAGE="JavaScript"> function YesOrNo() { if(document.formname.checkboxname.checked) { document.formname.textname.disabled='Yes'; } else { document.formname.textname.disabled='No'; }} </SCRIPT> <form name="formname"> <input type="text" size="10" name="textname"> <input type="checkbox" onclick="YesOrNo()" name="checkboxname" value="Yes"> </form> I am making a google CSE for a client site and I need to concatenate checkbox values together on the end of another form value. So I have a text box and the checkboxes: Code: <input name="q" cid="q" size="25" maxlength="50" value"off road tires"> <input type="checkbox" name="q" id="q" value="cooper|hankook" /> <input type="checkbox" name="q" id="q" value="Mickey Thompson|Bfgoodrich|GBC" /> <input type="checkbox" name="q" id="q" value="Hoosier|Nitto" /> For Google the URL string needs to be like this: Code: results.html?q=off road tires AND inurl:cooper|hankook|Mickey Thompson|Bfgoodrich|GBC this string says the person did not check the last box. I am having a hard time trying to do this. If you guys know a better way to accomplish the same thing I am all ears but I thought I would bring it to the experts and see what they had to say. Thanks for the help! I was trying to get total amount from these all checkbox, when I submit, but I don't know somewhere wrong. Please help me out. Here is my code: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Form </title> <script language = "JavaScript"> // The event handler functions for the check boxes function appleHandler() { var number = document.orderForm.apples.value; total = total + number * 0.59; } function orangeHandler() { var number = document.orderForm.oranges.value; total = total + number * 0.49; } function bananaHandler() { var number = document.orderForm.bananas.value; total = total + number * 0.39; } // The event handler function to produce the total cost message // when "submit" is clicked function finish() { total = total * 1.05; alert("Thank you for your order \n" + "Your total cost is: $" + total + "\n"); } </script> </head> <body> <h3> Order Form </h3> <form name = "orderForm" onSubmit = "finish()"> <p> <input type = "checkbox" name = "apples" size = "3" onClick = "appleHandler()" /> Apples </p><p> <input type = "checkbox" name = "oranges" size = "3" onClick = "orangeHandler()" /> Oranges </p><p> <input type = "checkbox" name = "bananas" size = "3" onClick = "bananaHandler()" /> Bananas </p><p> <input type = "reset" name = "reset" /> <input type = "submit" name = "submit" /> </p> </form> </body> </html> Hi, i have the next code: PHP Code: Code: <span id="review-buttons-container" class="a-center"> <input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" /> </span> </p> </div> <script type="text/javascript"> //<![CDATA[ var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements')); //]]> </script> and i add the follow JavaScript code to create checkbox (the idea is that only when you with the checkbox checked, the button work) i try: PHP Code: Code: <span id="review-buttons-container" class="a-center"> <form action="" onSubmit="return check(this);"> <input name="chkbox" value="please make sure i'm checked" type="checkbox" /> <input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" /> </form> </span> </p> </div> <script type="text/javascript"> //<![CDATA[ function check(form){ if( form.chkbox.checked ) return true; else{ alert("please check the checkbox"); return false; } } var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements')); //]]> </script> but its not work for me my javascript knowledge is not so good, please help me to create this checkbox) Thanks. Hello all, I usually try and solve my problems by reading all post but i i'm having problem trying to find a solution my problem. I have a simple form in html which presents to the user 2 checkbox's named cash or cheque depending on which answer he gives will present to him 2 different textbox. My problem is i only want the user to be able to select one of the two checkboxes and also i would like the resulting checkbox selected to be placed on the same row. Hope this makes sense!!! I'm only a beginner in javascript and i've found some of the following code on the net but i don't know how to ammend it so that it does what i need it to do. Here is the code: Code: <HTML> <HEAD> <TITLE>Document Title</TITLE> <script> <!-- function c(){} function getresultPay(){ if(document["schDetails"]["chkCash"].checked){ document.getElementById("shwCash").style.visibility="visible" } else{ document.getElementById("shwCash").style.visibility="hidden" } } function d(){} function getresultChex(){ if(document["schDetails"]["chkcheque"].checked){ document.getElementById("shwcheque").style.visibility="visible" } else{ document.getElementById("shwcheque").style.visibility="hidden" } } //--> </script> </HEAD> <BODY> <FORM NAME="schDetails"> <table border="1" width="457"> <tr> <td width="447" align="left" colspan="5" height="12"></td> </tr> <tr> <td width="187" align="left" height="22">Amount to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" height="22" colspan="3"> <input type = text name ="txtPurCode" tabindex= 25 size="20"></td> </tr> <tr> <td width="187" align="left" height="20">How would you like to pay</td> <td width="26" height="20" align="center"><input type="checkbox" name="chkCash" value="ON" onclick = "c() ; getresultPay()"></td></td> <td width="66" height="20" align="center">Cash</td> <td width="35" height="20" align="center"><input type="checkbox" name="chkcheque" value="ON" onclick = "d() ; getresultChex()"></td></td> <td width="108" height="20" align="center">Cheque</td> </tr> <tr id="shwCash" style="visibility:hidden"> <td width="187">Cash to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" colspan="3"> <input type = text name ='txtGRTNo' tabindex = 19 size="20"></td> </tr> <tr id="shwcheque" style="visibility:hidden"> <td width="187">Cheque to Pay</td> <td width="26" align="center" height="22">:</td> <td width="221" colspan="3"> <input type = text name ='txtGRTNo' tabindex = 19 size="20"></td> </tr> <tr> <td width="447" align="left" colspan="5" height="12"></td> </tr> </table> </FORM> </BODY> </HTML> I would really appricate if someone could solve this for me. Regards Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you! Code: var table = document.getElementById('maintable'); var i; // iterator var item; // pointer to item in received list for(i = 0; (item = contacts.ReturnValue.getNext()) != undefined; ++i) { table.insertRow(i + 1); var result = "<td>"; if(item.FirstName != undefined) { result += item.FirstName.Value; } result += "</td><td>"; if(item.LastName != undefined) { result += item.LastName.Value; } result += "</td><td>"; if(item.MobilePhoneGen != undefined) { result += item.MobilePhoneGen.Value; } result += "</td><td>"; if(item.EmailGen != undefined) { result += item.EmailGen.Value; } var td1 = document.createElement("td"); var chkbox = document.createElement('input'); chkbox.type='Checkbox'; table.rows[i + 1].innerHTML = result; chkbox.value=item.MobilePhoneGen.Value; td1.appendChild(chkbox); alert(chkbox.value); } hi can someone help me on my code on javascript sory im a newbie can you check this and help me what i need to do to add all the radio botton and check box. i already finish the add formula on the checkbox but i do not know how to add the two selected radio buttons to my checkbox buttons help please... for example: O selected is 80 O 60 O 60 O selected is 15 O 15 O 25 chkbox 22 chkbox 30 chkbox 8 Code: function Compute(form) { if(form.radio1[0].checked) form.text1.value=form.radio1[0].value; <---- the value of this is 80 else if(form.radio1[1].checked) form.text1.value=form.radio1[1].value; <---- 60 else if(form.radio1[2].checked) form.text1.value=form.radio1[2].value; <---- 60 else if(form.radio1[0].checked) form.text1.value=form.radio1[0].value; <---- 15 else if(form.radio2[1].checked) form.text1.value=form.radio2[1].value; <---- 15 else if(form.radio2[2].checked) form.text1.value=form.radio2[2].value; <---- 25 var a=0; if(form.chk1.checked) <----22 a = a + eval(form.chk1.value); if(form.chk2.checked) <----30 a = a + eval(form.chk2.value); if(form.chk3.checked) <----8 a = a + eval(form.chk3.value); if(form.chk1.checked && form.chk2.checked) a = eval(form.chk1.value) + eval(form.chk2.value); if(form.chk1.checked && form.chk3.checked) a = eval(form.chk1.value) + eval(form.chk3.value); if(form.chk2.checked && form.chk1.checked) a = eval(form.chk2.value) + eval(form.chk1.value); if(form.chk2.checked && form.chk3.checked) a = eval(form.chk2.value) + eval(form.chk3.value); if(form.chk3.checked && form.chk1.checked) a = eval(form.chk3.value) + eval(form.chk1.value); if(form.chk3.checked && form.chk2.checked) a = eval(form.chk3.value) + eval(form.chk2.value); if(form.chk1.checked && form.chk2.checked && form.chk3.checked) a = eval(form.chk1.value) + eval(form.chk2.value) + eval(form.chk3.value); form.text1.value=a; } |