Hey,

I have the following code:

I am trying to make it so when you tick the box it changed the result to what you clicked, then if you untick it it changes the result back...

There will be multipal tick boxes on a page... Here is my code...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function Tickbox(id){
		
$('#cb').unbind('change');
$('#cb').change(function() { 
		Untickbox(id);
		return false; 
	});
	
$('#result').html(id);

}

function Untickbox(id){
		
$('#cb').unbind('change');
$('#cb').change(function() { 
		Tickbox(id);
		return false; 
	});
	
$('result').html('none');

}
</script>


<div id="result"></div>
<input name="cb" type="checkbox" id="cb" value="img1" onChange="Tickbox('img1');">

Thanks for your help :)

Dan

Recommended Answers

Just change cross.png and accept.png to the two images you want:

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>

<script>

$(function(){
	$('image[data-value]').click(function(){
		var images = null;
		var total = 0;

		if($(this).attr('data-state') === 'off'){
			$(this).attr('data-state', 'on');
			$(this).attr('src', 'Images/accept.png');
		}
		else{
			$(this).attr('data-state', 'off');
			$(this).attr('src', 'Images/cross.png');
		}

		images = $('image[data-state=on]');

		for(var i = 0; …
Jump to Post

All 4 Replies

Member Avatar

Here is an example of what I think you are looking for:
(the reason I'm using live instead of bind is just in case you are adding checkboxes dynamically through JavaScript)

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>

<script>

$(function(){
	$('input[type=checkbox]').live('change', function(){

		var checkboxes = $('input[type=checkbox]:checked');
		var total = 0;

		for(var i = 0; i < checkboxes.length; i++){
			total += parseFloat($(checkboxes[i]).val());
		}

		$('#results').val(total);

	});
});

</script>

</head>

<body>

<label>1<input type="checkbox" value="1" /></label>
<br />
<label>2<input type="checkbox" value="2" /></label>
<br />
<label>3<input type="checkbox" value="3" /></label>
<br />
<label>4<input type="checkbox" value="4" /></label>
<br />
<label>5<input type="checkbox" value="5" /></label>

<hr />

<input type="text" id="results" />

</body>

</html>

Hey mate,

Thanks for your comment back! Sorry to be a massive pain!
I have had to change it to images (stars) and they light up when you click on them then if you click them again it turns the star off...

But its still not working! im not too good with JS!

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script>
function AddImg(id){

	$('#'+id).unbind('click');
	$('#'+id).click(function() { 
		RemoveImg(id);
		return false; 
	});
	
	document.getElementById(id).src="full.jpg";

}


function RemoveImg(id){

	$('#'+id).unbind('click');
	$('#'+id).click(function() { 
		AddImg(id);
		return false; 
	});
	
	document.getElementById(id).src="empty.jpg";

}
</script>

</head>

<body>

<img src="empty.jpg" width="28" height="28" id="1" onclick="AddImg(1);"><br>
<img src="empty.jpg" width="28" height="28" id="2" onclick="AddImg(2);"><br>
<img src="empty.jpg" width="28" height="28" id="3" onclick="AddImg(3);"><br>
<img src="empty.jpg" width="28" height="28" id="4" onclick="AddImg(4);"><br>
</body>

</html>

Dan

Member Avatar

Just change cross.png and accept.png to the two images you want:

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>

<script>

$(function(){
	$('image[data-value]').click(function(){
		var images = null;
		var total = 0;

		if($(this).attr('data-state') === 'off'){
			$(this).attr('data-state', 'on');
			$(this).attr('src', 'Images/accept.png');
		}
		else{
			$(this).attr('data-state', 'off');
			$(this).attr('src', 'Images/cross.png');
		}

		images = $('image[data-state=on]');

		for(var i = 0; i < images.length; i++){
			total += parseFloat($(images[i]).attr('data-value'));
		}

		$('#results').val(total);
	});
});

</script>

</head>

<body>

<img src="Images/cross.png" data-value="1" data-state="off" />
<br />
<img src="Images/cross.png" data-value="2" data-state="off" />
<br />
<img src="Images/cross.png" data-value="3" data-state="off" />
<br />
<img src="Images/cross.png" data-value="4" data-state="off" />
<br />
<img src="Images/cross.png" data-value="5" data-state="off" />

<hr />

<input type="text" id="results" />

</body>

</html>

Thanks very much :)

Dan

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.