|
JavaScript - Checkbox Check All
All,
I have the following checkbox code: PHP Code: echo "<input name=\"picbigid[]\" type=\"checkbox\" value=\"$pic[src_big]\">"; I then want to select all the checkboxes so I have this code: [PHP] echo "<input type=\"button\" name=\"CheckAll\" value=\"Check All\" onClick=\"checkAll(document.photos.picbigid)\"> <input type=\"button\" name=\"UnCheckAll\" value=\"Uncheck All\" onClick=\"uncheckAll(document.photos.picbigid)\">"; [PHP] My JS function is: Code: function checkAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = true ;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
If I do it like this: PHP Code: echo "<input name=\"picbigid\" type=\"checkbox\" value=\"$pic[src_big]\">"; It works but I can't have it like that because the form posts to another PHP page that needs the input name as an array. Any ideas? Thanks! Similar TutorialsSo 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 ! Hey all, I would like to get the id of a html check box when the client clicks it. I want to do this on the client side so i need to use java script. I want to be able to do this in both fire fox and ie window.event.srcElement works great for ie but not for firefox please do not tell me to use Event.target for firefox because that does not work. At least it is not working for me anyway. Thanks I currently have this script, I need it to check when I click the checkall button. Hm... now for some reason the select all button isnt working... Current code: Javascript: Code: <script type="text/javascript">
function checkall(chek)
{
for (i = 0; i < chek.length; i++)
chek[i].checked = true;
}
</script>
<script type="text/javascript">
function uncheckall(chek)
{
for (i = 0; i < chek.length; i++)
chek[i].checked = false;
}
</script>
PHP: PHP Code: <?php error_reporting(E_ALL); require("inc/config.php"); if (isset($_POST['del'])) { for ($count = 0;$count<count($_POST[delchk]);$count++) { $delete = $_POST[delchk][$count]; $query = "DELETE FROM persons WHERE id = '$delete'"; $result = mysql_query($query); if (!$result) { die("Error deleting persons! Query: $query<br />Error: ".mysql_error()); } } } $result = mysql_query("SELECT * FROM persons"); // Check how many rows it found if(mysql_num_rows($result) > 0){ echo "<table id=\"mytable\"> <thead> <tr> <th align=\"center\" scope=\"col\">Delete</th> <th align=\"center\" scope=\"col\">First Name</th> <th align=\"center\" scope=\"col\">Last Name</th> <th align=\"center\" scope=\"col\">High Scores</th> <th align=\"center\" scope=\"col\">Date of Entry</th> <th align=\"center\" scope=\"col\">IP Address</th> </tr> </thead> <tbody>"; echo "<form name = 'myform' action='' method='post'>"; while($row = mysql_fetch_array($result)) { echo "<tr align=\"center\">"; echo '<td><input type="checkbox" id="delchk" name="delchk[]" value="'.$row['id'].'" /></td>'; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td><a target=frame2 href='" ."profile.php?user1=". $row['FirstName'] ."'>Check HighScores</a></td>"; echo "<td>" . $row['AddedDate'] . "</td>"; echo "<td>" . $row['Ip'] . "</td>"; echo "</tr>"; } echo "</tbody>"; echo "</table>"; echo "<hr>"; echo "<input type='submit' name = 'del' value='Delete Selected'></form>"; echo "<input type='button' onclick='checkall(document.myform.delchk);' value='Select All'>"; echo "<input type='button' onclick='uncheckall(document.myform.delchk);' value='UnSelect All'>"; } else{ // No rows were found ... echo "No Registered Members"; echo "</tbody>"; echo "</table>"; } mysql_close($con); ?> Hello I am trying to find a way to use the check all javascript code to select all my checkboxes within a while...loop. Codes goes as follows: within the header on the top of page 1: <SCRIPT LANGUAGE="JavaScript"> function CheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = true ; } function UnCheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = false ; } </script> The code that displays the checkboxes, which is a page included onto page 1: echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursorointer'>{$row['propname']}</a><p>"; $propqry = mysql_query("SELECT * FROM users WHERE propid={$row['pr_id']}"); //using the hide and show id number, once clicked it will display the below contents echo "<div id={$row['pr_id']} style='display:none;'>"; while($propf = mysql_fetch_assoc($propqry)) { if($propf['uactive'] == "yes") { $pactive = "active"; } else { $pactive = "deactivated"; } //displays the information from the DB with a checkbox echo "<form name='myform' id='formmsg' method='post' action='profile.php?paction=edit&find=none' >"; echo " <input type='checkbox' name='check_list' value='{$propf['us_id']}'> <a href='profile.php?paction=edit&pid={$propf['us_id']}' /><img src='../images/secure/edit.png' name='Edit' border='0' /></a> <a href='profile.php?paction=delete&pid={$propf['us_id']}' /><img src='../images/secure/delete.png' name='Delete' border='0' /></a><label class='cuser'> {$propf['fname']} {$propf['lname']}, ({$propf['uname']}), {$pactive}</label><br>"; } echo "</form>"; echo '<p><input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)"> <p>'; echo "</div>"; I receive the following error message when I click on the Check All button. Message: 'length' is null or not an object Line: 15 Char: 13 Code: 0 URI: http://www.domainname.com/profile.ph...edit&find=none Can anyone help me figure this out? 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" /> 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. On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated 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 guys. I'm working a bunch of pre existing code on a CMS. Just after a quick fix. Doing a show/hide thing on a particular div somewhere on the page depending if a checkbox is ticked or not. Currently there is 3 checkboxes that are dynamically added through the CMS. Here's simplified version of the form: Code: <form id="simplesearch" name="simplesearch"> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="5" class="input-checkboxes" /> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="4" class="input-checkboxes" /> </form> And here's the javascript I was playing with. Code: function showhidefield(id)
{
if(document.simplesearch.meta_data_array_search_criteria[custom_profile_type][''].checked) {
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "visible";
}
else
{
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "hidden";
}
}
Problem I'm having is how do i do a check to see if those checkboxes are checked in the javascript with those name arrays? How do i separate them? 'm guessing I have to loop through them or something?Hopefully that make senses - it's late here and I'm losing the plot Any pointers would be gratefully welcomed 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 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> I am trying to make a checkbox on the screen so that when I check or uncheck it a word will print on the screen. Unfortunately it is not working. The checkbox shows up but nothing happens when I check/uncheck it. Also, even though that part of the code isn't working everything that comes after it that is suppose to print onto the screen is also not printing. I am assuming it is because there is an error and cannot reach that part of the code. I am used to programming in Java and using eclipse which has a debugger in it and was wondering if there is a nice editor/debugger like eclipse I can use for JavaScript. Thanks. Code: <html>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:F0F0F0;
}
</style>
</head>
<body>
CheckBox1 <input type="checkbox" id="tandc" onClick="validate()" />
<script type="text/javascript">
fuction validate(){
if(cb1.onClick){
document.write("Print something");
}else{
document.write("Now print something?");
}
}
document.write("</br></br></br></br>");
document.write("Hello, thank you for visiting my webpage I hope you like it.");
</script>
</body>
</html>
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 a list of checkboxes with Ids that go something like; chk_AGE=16 chk_AGE=17 chk_AGE=18 chk_GENDER=MALE chk_GENDER=FEMALE chk_RANK=OFFICER chk_RANKE=OTHER When a user checks/unchecks '16' (for example), I want javascript to look up how many checkboxes in my form have an Id that begins with "chk_AGE" and return the number in an alert box ("3" in this case). If my user had checked/unchecked "Officer" an alert box would return "2" as there are 2 checkboxes that begin "chk_RANK". Can someone please help with this? I am a complete javascript beginner. Hello I have a site of classifieds ads.... user is choosing what he want to see/search and then a table is printed on the screen(with all the requested results) My question is... Is there a way to add a "CHECK BOX" to each of the ads and the user is checking what he wants to see later on. after he will have a button "see my checked ads" and a page will open with ONLY the ads that he checked before Any suggestions? Thanks a lot Danny I am using a checkbox to turn on and off some labels on a line on a google map, which is working fine if the line is already drawn, using this function: Code: function distboxclick(labelsbox) {
if (labelsbox.checked) {
for (var i=0; i<distmarkers.length; i++) {
if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.show();
}
} else {
for (var i=0; i<distmarkers.length; i++) {
if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.hide();
}
}
}
but the thing is that I want the labels to be turned off to begin with and switched on if the box is checked. Which is also fine, using this snippet: Code: if (prevMarker){
var dist = getSegmentDistance(prevMarker.mMarker, distmarker);
var label = new ELabel(point, dist, "labelstyle", new GSize(10,-15));
distmarkers[numMarkers-1].mLabel = label;
distlabels.push(label);
map.addOverlay(label);
label.hide();
drawOverlay();
}
but what I am trying to do now is make sure that if the box is checked before the line starts to be drawn then the labels will come up straight away. So I figured all I had to do was add in the following to the above: Code: if (labelsbox.checked){
label.show(); }
else {
label.hide(); }
and pass the labelsbox variable to the function where that is all happening. But instead I get a "labelsbox is undefined" error... If I take that if statement out I see that labelsbox is defined, but that doesn't really help. I guess I'm putting things in the wrong order or something, but I'm kind of baffled. You can see my test page here. Thanks in advance for any suggestions. Hi thier, I am using PHP to generate a page with a list of checkbox's on it. Then I am using JavaScript to validate that the user has selected at lest 1 of the given box's before I do a post back. But I cannot get my Javascript to see my CheckBox Array. Any help you can offer would be very useful thank you all in advance. Here is my PHP code used to build to Checkbox list. Code: while ($row = mysql_fetch_array($data, MYSQL_ASSOC))
{
if(is_null($row['Team_Number']))
{
$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
}
else if($row['Team_Number'] == $_REQUEST['T'])
{
str1 = sprintf('<input type="checkbox" name=\'People\' value="%s" checked>',$row['Member_ID']);
}
else
{
$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
}
$str = sprintf('%s,%s (%s)',$row['First'],$row['Last'],$row['Nick_Name']);
echo('<tr><td width ="10%" align="center">');
echo($str1);
echo('</td><td width="90%" align="Left">');
echo($str);
echo('</td >');
echo('</tr></td>');
}
And here is my Javascript, I've added the whole function incase it's not clear just from a code segment. Code: function TeamSetup()
{
var required = document.form1.BowlersPerTeam.value;
var total = document.form1.People.length;
var Tm = document.form1.TeamName.value;
var cnt = 0;
var peopleIDs = "";
var test = document.getElementsByName('People');
if(isArray(document.form1.People))
{
for(var i=0; i < total; i++)
{
if(document.form1.People[i].checked)
{
if(peopleIDs.length > 0)
{
peopleIDs = peopleIDs +",";
}
peopleIDs = peopleIDs + document.form1.People[i].value.toString();
cnt++;
}
}
}
else
{
if(document.form1.People.checked)
{
cnt=1;
peopleIDs = peopleIDs + document.form1.People.value.toString();
}
}
if(Tm.length > 0)
{
if(cnt == required || cnt > 0)
{
//Hand off to next step for completeing Processing.
var myForm = document.createElement("form");
myForm.action=window.location;
myForm.method="Post";
myForm.appendChild(createformInput("Process","PP"));
myForm.appendChild(createformInput("people",peopleIDs));
myForm.appendChild(createformInput("Team",GetQueryString("T")));
myForm.appendChild(createformInput("League",GetQueryString("L")));
myForm.appendChild(createformInput("TeamName",Tm));
document.body.appendChild(myForm);
myForm.submit();
}
else
{
alert('You need to Select at least 1 player');
}
}
else
{
alert('You need to enter the team name!');
}
}
|
|||||||