Solved

Code to use cross box instead of checkbox in form

Posted on 2010-09-23
9
708 Views
Last Modified: 2012-05-10
i need code which show cross on click not tick
0
Comment
Question by:savsoft
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now