0

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

2
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by Danny159
0

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>
0

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

1

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.