Solved

Code to use cross box instead of checkbox in form

Posted on 2010-09-23
9
747 Views
Last Modified: 2012-05-10
i need code which show cross on click not tick
0
Comment
Question by:savsoft
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33750981
if you are looking for a javascript code to check if the checkbox if checked or not, then see
http://www.w3schools.com/js/tryit.asp?filename=try_dom_input_checked

for example, if the html is
<input type="checkbox" id="myCheck" />

this method will return the true if the checkbox is ticked
function ischecked(checkboxId)
{
    return document.getElementById(checkboxId).checked;
}
alert(ischecked("myCheck"));
0
 

Author Comment

by:savsoft
ID: 33751067
is it java script code ?
Please write full code...
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33751074
see if this helps

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function ischecked(checkboxId)
		{
			return document.getElementById(checkboxId).checked;
		}
	</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<input type="checkbox" id="myCheck" onclick="alert(ischecked(this.id))"/>
</BODY>
</HTML>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:savsoft
ID: 33751104
But it shows message about false when untick.
i want any code which shows red cross in box on click..
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33751186
<<i want any code which shows red cross in box on click..>>
what do you mean? you want to show an read cross image on checkbox toggle?

try this code, replace the image name with yours
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function ischecked(checkboxId)
		{
			return document.getElementById(checkboxId).checked;
		}
		function toggleImage(checkboxId)
		{
			if ( ischecked( checkboxId ) )
			{
				document.getElementById("img1").style.display = "block";
			}
			else
			{
				document.getElementById("img1").style.display = "none";
			}
		}
	</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<input type="checkbox" id="myCheck" onclick="toggleImage(this.id)"/>
	<img src="21022009.jpg" width="50px" height="50px" style="display:none" id="img1">
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:savsoft
ID: 33751493
Thank you gurvinder,

please read my requirement carefully..

what does checkbox mean?: it is a box which shows tick mark in square box

but i want crossbox ( which shows cross "x" in square box on click

IT SHOWS CROSS BOX IN THE BOX WHERE WE CLICK NOT BELOW...................

Please see attached image


x.JPG
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 33751595
ohh, so you want the image to toggle at the onclick event right?

then check this.
you need to replace the images name

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function toggleImage(imageId)
		{
			var imageName = document.getElementById("img1").src ;
			if ( imageName == "21022009.jpg" )
			{
				imageName = "18072010.jpg";
			}
			else
			{
				imageName = "21022009.jpg";
			}
			document.getElementById("img1").src = imageName;
		}
	</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<img src="21022009.jpg" width="50px" height="50px" id="img1" onclick="toggleImage(this.id)">
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:savsoft
ID: 33866190
still i did not get answer.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33867005
please mention what is wrong with the output of code i have pasted above, please be specific.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question