JavaScript - Checkboxes With Results Logged
Hi everyone,
I only know basic programing and was hoping someone can give me a hand with implementing checkboxes. What I'm hoping to achieve is a form that will have a number of checkboxes that, when a box is checked, the text corresponding to said box will be logged at the bottom of the page. Each checkbox will also have a numerical value which will display the tally at the bottom. for example, I might have the following two boxes Box 1: I have a Bike +3 box 2: I have a Car +5 When both boxes are checked, the log at the bottom would read: I have a Bike +3 I have a Car +5 Total = +8 Code: <form action=""> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike +3<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car +5 </form> Similar TutorialsHey there everyone. I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it. I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear. I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes. For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear. like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know. thanks view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP 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=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> hi, I am following the tutorial on Windows Live App API from he http://isdk.dev.live.com/ISDK.aspx?c...ncepts&index=0 and I have added my Client ID got a login system working and allowing information to be passed through but I cannot display the user that's currently logged in, here is my page: link: http://www.trialsevolution.co.uk/app/ code: 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> <title>Greeting the User Test page</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://js.live.net/v5.0/wl.js" type="text/javascript"></script> <script type="text/javascript"> var APPLICATION_CLIENT_ID = "000000004805DA23", REDIRECT_URL = "http://www.trialsevolution.co.uk/app/home.html"; WL.Event.subscribe("auth.login", onLogin); WL.init({ client_id: 00000000000000, redirect_uri: "http://www.trialsevolution.co.uk/app/home.html", response_type: "token" }); WL.ui({ name: "signin", element: "signInButton" }); function greetUser(session) { var strGreeting = "welcome"; WL.api( { path: "me", method: "GET" }, function (response) { if (!response.error) { strGreeting = "Hi, " + response.first_name + "!" document.getElementById("greeting").innerHTML = strGreeting; } }); } function setMeImage(token) { var imgHolder = document.getElementById("meimg"), imgTagString = ""; if (token != null) { var url = "https://apis.live.net/v5.0/me/picture?oauth_token=" + escape(token); imgTagString = "<img src='" + url + "' />"; } imgHolder.innerHTML = imgTagString; } function onLogin() { var session = WL.getSession(); if (session){ greetUser(session); setMeImage(session.access_token); } } </script> </head> <body> <p>Sign in to display a welcome greeting.</p> <div id="meimg"></div> <div id="greeting"></div> <div id="signInButton"></div> </body> </html> 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; } 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! 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.
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 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 Hi! I have been working on an assignment, and I seem to have things working okay, except that I'd like for the results (Message + list of 3 favorite movies or books) to show up in the Results box of the original page, not in a separate page. I'm sure it's something totally obvious that I'm missing, but I'm a newbie, and would appreciate any hints or tips that you all could give me. Thanks so much in advance! Heather W Hello, today I am trying to allow a user to easily uncheck/check all checkboxes in a form by checking or unchecking a checkbox. The checkboxes would be in a form like so: Code: <form action="" method="post"> <input type="checkbox" name="checked[]" value="1"> <input type="checkbox" name="checked[]" value="2"> <input type="checkbox" name="checked[]" value="3"> <input type="checkbox" name="checked[]" value="4"> </form> I use an event handler to call a function: Code: <input type="checkbox" name="checkall" onchange="checkall('checked[]', this.checked)"> And here is the function: Code: function checkall(box_name, current_state) { all = document.getElementsByName(box_name); action = (current_state == "checked") ? "false" : "true"; for (i = 0; i < all.length; i++) { all[i].checked=action; } } The event handler should pass the name of the checkboxes and whether the "check all" checkbox is currently checked or not to the checkall() function. Nothing happens when I check/uncheck the "check all" function. Help? 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. Hello, I have a form generated by mySQL and PHP, and inside the form (named 'UpdateDB') each line has checkboxes, like so: Code: <input type="checkbox" name="checkbox[]" value="96" onclick="highlight(this,'check_96')"> The onclick is to highlight the row, that works fine. However, I wrote a javascript function that toggles the select all the checkboxes or none. This is done by an image: Code: <img src="img/select.png" align="top"> <a href="#" onClick="togBox('updateDB');"><img src="img/all.png" name="listToggle" align="top"></a> Easy, right? So heres the Javascript function that the above image (the 'none' part) links to: Code: function togBox(form) { var myForm = document.forms[form]; document.listToggle.src=='http://gospeltruth.tv/admin/img/all.png' ? toggle = true : toggle = false; (toggle) ? document.listToggle.src='img/none.png' : document.listToggle.src='img/all.png'; for( var i=0; i < myForm.length; i++ ) { (toggle) ? myForm.elements[i].checked = 'checked' : myForm.elements[i].checked = ''; } } Its a brilliant function if I do say so myself, and this is what I dont get: two days ago, it was working fine, today, its not working at all. The image changes, but IE flags up the 'myForm.length' as an error. How was it working 2 days ago and not today, when I havent touched it? Can anybody advise why its not currently working? Thanks for your help, ~Chud37 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) I have a group of checkboxes named "list[]". I want to validate that at least one is checked. How can I do this?
Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please? Code: <td> <input type="checkbox" name="weddingitem1" value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br /> <input type="checkbox" name="weddingitem2" value="Champers" id="Champers"/><label for="Champers" >Champers<br /> </td> 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> This script works via "elem.checked" which is great for checkboxes (see http://javascript.internet.com/forms...heckboxes.html), but I need it to work with image buttons instead where there is no "checking" going on. Is this possible? I tried elem.onclick and elem.clicked but neither works. I don't know enough about onclick conditionals. Please help. Code: function UpdateCost() { var sum = 0; var gn, elem; for (i=0; i<4; i++) { gn = 'game'+i; elem = document.getElementById(gn); if (elem.checked == true) { sum += Number(elem.value); } } document.getElementById('totalcost').value = sum.toFixed(2); } tl;dr: Want to make the above work with <a onclick="UpdateCost()"><img></a>, not <input type="checkbox" onclick="UpdateCost()"> 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 from a browser address bar command? say if a page has hundreds of checkboxes, and I needed to check them all, but only 2-3 should be left out, how do i input a browser command line, to check it all, so i will manually uncheck the 2 or 3 thats not needed?
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! |