Member Avatar for Danny159

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
  • 215 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Danny159
Member Avatar for stbuchok

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>
Member Avatar for Danny159

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 for stbuchok

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>
Member Avatar for Danny159

Thanks very much :)

Dan

Be a part of the DaniWeb community

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