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
  • 231 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Danny159

Dani AI

Generated

A simpler, more reliable approach is to stop unbinding/rebinding and bind one delegated handler to a stable container (for example #stars) that toggles an element's state (a class or data-* flag) and then recomputes the result from elements that are “on”. This uses event delegation and keeps the code short and maintainable — see the jQuery .on() docs. (api.jquery.com)

Short debugging notes taken from the thread: , your Untickbox uses $('result') (missing the #) so it never updates #result. Rebinding handlers inside the handler is fragile; prefer a single handler that toggles state. suggested .live() — that method was deprecated in 1.7 and removed in 1.9, so use .on() instead. Also the selector 'image[data-value]' is wrong for standard HTML; use <img> and img[data-value]. (jquery.com)

Practical steps that work well: give each star an HTML data-value="..." and a class like star; bind a single delegated click handler on a container; inside the handler toggleClass('on') (or a data flag) and update the visual (CSS class or src); recompute by iterating $('.star.on') and summing Number($(this).data('value')||0). For reading checkboxes use .prop('checked') (not .attr('checked')). Use data-* and jQuery .data() for stored values. (api.jquery.com)

Example (minimal) pattern:

$(function(){
  $('#stars').on('click', '.star', function(){
    var $s = $(this).toggleClass('on');
    $s.attr('src', $s.hasClass('on') ? 'full.jpg' : 'empty.jpg');
    var total = 0;
    $('#stars .star.on').each(function(){ total += Number($(this).data('value')||0); });
    $('#results').val(total);
  });
});

Avoid inline onclick attributes and numeric-only ids (use star-1), and the handler will behave predictably even with dynamic markup.

Recommended Answers

All 4 Replies

Member Avatar for Member #905211

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 Member #905211

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.