JavaScript - Javascript Checkbox Restriction
sir i have a problem in is page. i want to have a javascript function that call on checkbox on click event.
if checked firstly a 125 x125 sized checkbox then i want to restrict that all checkbox that i checked later must 125 x 125 sized if i checked 250 x250 sized checkbox then create a alert message pleas select 125 x 125 sized , i also have function plz check it function validate(f) { var array = new Array(); for(var i = 0; i < document.delet.checkbox.length; i++){ var ele = document.delet.checkbox; if( ele[i].checked){ var size = document.getElementById(f).value; array[i]=size; alert(array[0]); /*if(array[0] == array[i]){ alert("size is equal"); }else if(){ alert("size is not equal"); }*/ }//end if }//end for //if(first_size != second_size){alert(second_size); return false;} }//end function this is a one row and repeated in while loop php script, row code is below. Code: <tr bgcolor="<?php echo $color;?>"> <td align="center"> <input name="checkbox[]" type="checkbox" id="checkbox" value="<?php echo $aaa['id']; ?>" onclick=" return validate('<?php echo $id; ?>');" /></td> <td align="center"><?php echo $aaa['imgSize'];?><input type="hidden" id="<?php echo $id; ?>" name="size" value="<?php echo $aaa['imgSize'];?>" /></td> </tr> <?php }//end while ?> this is a online page plz check it http://hkcsy.com/ads Similar TutorialsHello, i want to build a tax calculator's form, i want use a checkbox, so when the checkbox "checked" then the total tax will add the "luxury goods tax" on total tax. this is my 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>KasKusbay Order Calculator</title> </head> <SCRIPT language = "javascript"> var currency_rates = new Array(); currency_rates["GBP"]=0.62; currency_rates["CAD"]=0.99; currency_rates["EUR"]=0.75; currency_rates["AUD"]=0.96; function getCurrencyRates() { var currencyRates=0; var theForm = document.forms["myform"]; var selectedCurrency = theForm.elements["currency"]; currencyRates = currency_rates[selectedCurrency.value]; return currencyRates; } function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; } return pbmService; } function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; } return pbmService; } function ceiling( num, at ) { var temp = num / at; // 523/50 ==>> 10.46 return Math.ceil(temp) * at; // ceil(10.46 ==>> 11, 11 * 50 ==>> 550 } function calculateTotal() { var X; var form = document.myform; var A = form.price.value.replace(/[^\d\.]/g, ""); form.price.value = A; var B = form.shipping_cost.value.replace(/[^\d\.]/g, ""); form.shipping_cost.value = B; var F = (parseFloat(A) + parseFloat(B)) * getCurrencyRates(); var C = Number(F) * parseFloat("0.1"); form.total.value = C.toFixed(2); var G = Number(F) + Number(C); var H = Number(G) * parseFloat("0.05") form.p2.value = H.toFixed(2); var I = Number(G) * parseFloat("0.03") form.p3.value = I.toFixed(2); var J = Number(G) * parseFloat("0.2") form.p4.value = J.toFixed(2); X = Number(C) + Number(H) + Number(I) + addPbm(); form.total_IDR.value = X.toFixed(2); //exp: ceiling: document.jslearnform.total_USD.value = Math.ceil(X); //or decimal: document.jslearnform.total_USD.value = X.toFixed(2); //or even document.jslearnform.total_USD.value = Math.ceil(X).toFixed(2); } </SCRIPT> <body> <form name="myform" method="post" action=""> <table width="93%" border="0" id="form_table2"> <tr> <th width="24%"><p>Price ›</p></th> <td width="37%"><p> $ <input type="text" size="7" id="price" name="price" /> <select id="currency" name="currency" onchange="calculateTotal()"> <option value"gbp">GBP</option> <option value"cad">CAD</option> <option value"eur">EUR</option> <option value"aud">AUD</option> </select> <br /> Input Price and Currency</p></td> <td width="39%" rowspan="3"><p align="right">Duty <input type="text" style="background-color: #DCDDDD;" size="12" id="total" readonly name="total" value="" /> </p> <p align="right">Sales Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p2" readonly="readonly" name="p2" value="" /> </p> <p align="right">Income Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p3" readonly="readonly" name="p3" value="" /> </p> <p align="right">Luxury Goods Tax <input type="text" style="background-color: #DCDDDD;" size="12" id="p4" readonly="readonly" name="p4" value="" /> </p></td> </tr> <tr> <th>Shipping Cost ›</th> <td> $ <input type="text" size="7" id="shipping_cost" name="shipping_cost" /> <br /></td> </tr> <tr> <th>Kind ›</th> <td><select id="currency3" name="currency2" onchange="calculateTotal()"> <option value="value""EL">Electronic</option> <option value="value""NL">Apparel</option> </select> <br /> <input type="checkbox" id="pbm" name="pbm" /> Luxury Item</td> </tr> <tr> <th>Tax ›</th> <td><div align="center"> <input type="text" style="background-color: #DCDDDD;" size="14" id="total_IDR" readonly name="total_IDR" value="" /> </div></td> <td> </td> </tr> <tr> <th> </th> <td><div align="center"> <input type="button" value="Calculate" onclick = "javascript:calculateTotal()" /> <input type="reset" value="Reset" /> </div></td> <td><div align="center"></div></td> </tr> </table> </form> </body> </html> But i have problem with the function command, the total tax doesn't appear, seems i made wrong function code on function adPbm(). Code: function addPbm() { var PbmService=0; var theForm = document.forms["myform"]; var pbm = theForm.elements["pbm"]; if(pbm.checked==true) { pbmService = [J]; =====> anyone can help me correct this coding? } return pbmService; } Thank you for anyone could help. Hello, I'm new to Javascript, but have been programming in PHP and other web codes for 4 years now. I was wondering how you would check if a checkbox was ticked, upon its selection and then unhide HTML content, and then hide such content when deselected.. So far I have this: Code: <script type="text/javascript"> function Agree() { document.getElementById("stepTwo").className = ""; } </script> Which is called by onclick="Agree()" on the select box itself.. I understand an if statement is needed, but how would one go about doing this as my if statements do not appear to be working. Hello, I am not a coder and this has been giving me grief for days My form is located here on page three of the multi form: http://www.rocpinions.com/main-form.html I have been working on this for days and can't figure it out. I have four check boxes. Dog, Cat, Other, and None of These. If Dog Cat and Other (or any combination of) are checked that is fine but if the check box "None of These" is checked I need it to remove the checks from All other boxes. This is an example of exactly what I need my form to do jsfiddle.net/srEuM/ Does anyone know how I can accomplish this with RS Form Pro? Here is the code I am using: Code: <script type="text/javascript"> function checkI() { var checkL = document.getElementsByName('form[PetsInHouse][]'); for (var i=0;i<checkL.length-1;i++) if(document.getElementById('PetsInHouse3').checked){ document.getElementById('PetsInHouse'+i).disabled = true; document.getElementById('PetsInHouse'+i).checked = false; } else { document.getElementById('PetsInHouse'+i).disabled = false; } } </script> This is how I am calling it in the additional attributes in RS Form Pro Code: onclick="checkI();" I am currently using this code above and it only disables all checkboxes when "None of These" is checked but if I check any of the other boxes I can still check "None of These" and that is not the correct functionality. This is exactly what I need to do but in the same format I have above. http://jsfiddle.net/srEuM/ Any help would be greatly appreciated. Thank you Deziner Hi everyone. I need a Javascript code for the following: i have a checkbox on my page. when this checkbox got checked, an alert like "Are u sure?" must ask if OK or Cancel. if i click OK the checkbox becomes checked, it runs a javascript function (chkIt() )and refreshes the page. if i click Cancel the checkbox should not became checked and my function will not run. Thanks a lot. Hello! I have modified the create_account.php page of an osCommerce store, and I added 4 checkboxes for the 4 terms that the customers must agree to. If not checked, the error message should come up (same for each - doesn't matter)> ok nevermind it's actually working now. I am fairly new to javascript and am attempting to create a function that will clear one checkbox when another is checked. I have multiple forms with dynamically generated names on the page. Here is what I have: <script type="text/javascript"> function undo_Complete(myForm) { var formName = myForm.name; if(document.formName.getElementsByName("Needs_Change").checked==true) { document.formName.getElementsByName("Complete").checked=false; } } </script> The two checkbox fields involved: <input name="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox"> <input name="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)"> Could someone please tell me what I am doing wrong? Thank you! Lisa Guys, For some reason my script only works when I have at lease two checkboxes. To simulate the problem just run it once with two html input checkbox elements -> check one checkbox and press submit -> it works -> Now remove one input checkbox field and check the remaining checkbox & submit -> Bamm doesn't work... What am I doing wrong ? Code: <html> <head> <script> function Check(chk) { for (i=0; i < chk.length; i++) chk[i].checked=document.ListActionForm.Check_ctr.checked ; } function desubmit() { if(get_args()==false) {alert("nothing_selected");return false;} if(labelling(true)) return false; } function labelling(s) {return true;} function get_args() { s=chkboxa2str(document.ListActionForm['listaction[]']); if(s)alert(s); if(s.length<8)return false; else return s; } function chkboxa2str(chkbox_a) { var list = ""; for(var i = 0; i < chkbox_a.length; i++){ if(chkbox_a[i].checked) { list += chkbox_a[i].value + " "; } } return list; } </script> </head> <body> <form action="?h=1296078874" method="post" name="ListActionForm" onsubmit="return desubmit()"> <input type='checkbox' name='listaction[]' value='2010102909103530'> Testbox 1<br> <input type='checkbox' name='listaction[]' value='2010102909103532'> Testbox 2<br> <input type="Submit" name="Submit" value="Versturen" > </form> </body> </html> URL: https://medicard1.com/services.html Site also employs CodeIgniter from original developer. Code below sets up a table with a form and script in separate cells of the same row. Looks good and click on check box works ok, but script seems to only run when the page is initially loaded. Does not change variable 'c' and display the change. Am in a bind for this one. My developer is away for the holiday and CEO wants it done ASAP. Anyone have an idea? <!-- Setup a table to hold the elements where I want them without conflicting with CodeIgniter - K.I.S.S.--> <table style="border:0px;"> <tr> <td style="width:600px; text-align:left;"> <!-- Un-submitted form with legend and checkbox input to acknowledge terms and display discount code --> <form name="acknowledge" action="" method=""> <legend>I acknowledge that I have read and understand the content of this page <!-- onClick should execute display_code() script --> <input style="border:0px; width:40px;" type="checkbox" name="investor" onClick="display_code()"/> </legend> </form> </td> <td style="width:200px; text-align:right;"> <!-- Script should check checked state of checkbox investor and set c to appropriate value --> <script type="text/javascript"> <!-- set c="" after get this working --> var c="NOT SET"; function display_code() { if (document.acknowledge.investor.checked) { var c="INVESTOR"; } else { <!-- set c="" after get this working --> var c="NO CODE"; } } document.write('Your code is: ' + c); </script> </td> </tr> </table> Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work. My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off. I have my checkbox created as well as all the effects working for it. Here is a piece of the main code as well as a link to the ambilight.js file Code: <label name="ambilightToggle"> <input type="checkbox" name="toggle"/> <div class="toggle-switch"> <div class="handle"></div> <div class="track"> <span>OFF</span><span>ON</span> </div> </div> </label> </div> </div> <div id="main" class="clearfix"> <div id="video-edge"> <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png"> <div id="video-wrap" class="video-js-box moo-css"> <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png"> <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> </div> </div> <script type="text/javascript"> ambiLight.create(document.getElementById('example')) </script> Portfolio Page http://www.eschulist.com/test/js/ambilight.js I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn. Code: <script type="text/javascript"> $(document).ready(function(){ $(this).click(function(){ $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway'); }); }); </script> Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe? Firstly, I'm a complete Javascript noob, so apologies if this is blindingly simple. I'm trying to write a piece of javascript that will check a single checkbox depending on a dynamically-imported piece of information further up the page. The page will look like this: Code: <div id="title"> <p class="white">1</p> </div> <div id="question"> <p>Please indicate your area(s) of interest below:<br /> <input type=checkbox value="1" /> Option 1<br /> <input type=checkbox value="2" /> Option 2<br /> <input type=checkbox value="3" /> Option 3<br /> <input type=checkbox value="4" /> Option 4</p> </div> The variable which indicates which checkbox should already be checked is in the div 'title' in the p class 'white'. So in the case above, when the page loads the 'Option 1' checkbox should already be checked. The javascript i have, rather poorly, cobbled together so far just doesn't work, and I was wondering if anyone could point me in the direction of some useful tutorials. All the tutorials I have read so far deal with mass checking all the boxes with a button click. Hello I am new at Javascript. Please help me this: I have a form and a checkbox: Code: <input name="pass" type="password" class="textfield" /> <input type="checkbox" class="check"> Click here to show/hide password If I the checkbox is checked, it will show the password in the form, it means Code: <input name="pass" class="textfield" /> if not, the input form is: Code: <input name="pass" type="password" class="textfield" /> Hi all, I use a javascript to generate a checkbox list. It works well but all the <input type="checkbox"> generated have the same id. I would like to find a way to auto-implement the id (with a unique id). So if my javascript generates 10 checkboxes, I will get id from 1 to 10 or something similar. Code: // here I build the filter checkboxes based on all the class names $.each(arrayUniqueClasses, function() { $('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="1" /> <label class="check" for="1"></label> <label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters'); }); so I tried something but it doesn't work at all (I'm a beginner as you can guess) : Code: var getUniqueId = (function () { var id=0; return function() { if (arguments[0]==0) id=0; return id++; } } )(); Thanks for helping here the full script if needed : Code: function unique(a) { tmp = new Array(0); for(i=0;i<a.length;i++){ if(!contains(tmp, a[i])){ tmp.length+=1; tmp[tmp.length-1]=a[i]; } } return tmp; } function contains(a, e) { for(j=0;j<a.length;j++)if(a[j]==e)return true; return false; } function removeItems(array, item) { var i = 0; while (i < array.length) { if (array[i] == item) { array.splice(i, 1); } else { i++; } } return array; } $(document).ready(function () { if ($('.filterThis > li').length < 2) { return; } var stringOfClassNames = ''; $('.filterThis > li').each( function (i) { var thisClassString = $(this).attr('class'); stringOfClassNames = stringOfClassNames +' '+ thisClassString }); stringOfClassNames = jQuery.trim(stringOfClassNames); var arrayClasses = stringOfClassNames.split(' '); var arrayClasses = arrayClasses.sort(); totalNumberOfItemsToFilter = $('.filterThis > li').length; var result = new Object(); for (var filterClass in arrayClasses) { if (result[arrayClasses[filterClass]] === undefined) { result[arrayClasses[filterClass]] = 1; } else { result[arrayClasses[filterClass]]++; } } var resultsToRemoveFromFilters = new Array(); for (var item in result) { if (result[item] == totalNumberOfItemsToFilter) { resultsToRemoveFromFilters.push(item); } } arrayUniqueClasses = (unique(arrayClasses)); if (arrayUniqueClasses.length > 1) { $('<ul class="filters"><\/ul>').insertAfter('h3'); $.each(arrayUniqueClasses, function() { $('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="0" /><label class="check" for="0"></label><label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters'); }); var classesStringOfSin = new Array(); classesStringOfSalvation = arrayUniqueClasses; $('.filterThis > li').addClass('filterTriggerShown'); $('.filters input').click( function() { var value= $(this).val(); stringValue = '.filterThis > li.'+value; if ($(this).is(':checked')) { classesStringOfSalvation.push(value); classesStringOfSin = removeItems(classesStringOfSin, value); $(stringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown').slideDown(); } else { classesStringOfSin.push(value); classesStringOfSalvation = removeItems(classesStringOfSalvation, value); $(stringValue).removeClass('filterTriggerShown').addClass('filterTriggerHidden'); $.each(classesStringOfSalvation, function() { var newStringValue = stringValue+'.'+this; $(newStringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown'); }); $('.filterTriggerHidden').slideUp(); } }); } }); Guys Need Help here... here i send attach my script. i need combine 2 function script into . but i can figure it out. can everyone helps me. Code: <?php require_once('../Connections/koneksi.php'); ?> <!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> <script> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cant delete all rows"); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } function selectnama() { var i = 0; i = document.form1.txtcustomer.value; i= i.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' '); //alert(cust[i]); document.form1.select2.value = i; } function change2() { document.form1.txtcustomer.value = document.form1.select2.value; } function enable_text(status) { status=!status; document.form1.qty_material.disabled = status; } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form name="form1" method="post" > <table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="6"> <tr> <td style="width:20px;"><INPUT type="checkbox" name="chk" /></td> <td> <input type="text" name="txttipe[]" placeholder="Tipe" id="txttipe" size="40"/> / <input name="txtcustomer" type="text" id="txtcustomer" onkeyup="selectnama()" size="10" maxlength="10"/> <select name="select2" style="color:blue;" onchange="change2()" > <option></option> <?php $query = mysql_query("select right(KUNNR,6), NAME1 from kna1 order by NAME1") or die(mysql_error()); $query3 = mysql_query("select * from spg_kna1_exception order by NAME1") or die(mysql_error()); while($row = mysql_fetch_array($query)) { echo "<option value=".$row[0].">$row[1] - $row[0]</option>"; } while($row3 = mysql_fetch_array($query3)) { echo "<option value=".$row3[0].">$row3[1] - $row3[0]</option>"; } ?> </select>; <input type="checkbox" name="qty_matnr" onClick="enable_text(this.checked)" > Qty <input type="text" name="qty_material"> </td> </tr> </table> <INPUT type="button" value="Add Model" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Model" onclick="deleteRow('dataTable')" /> </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 ! 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 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! 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> 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 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> |