jQuery, change background image on checkbox select

Hi,

I'm trying to change background color on a label/div, depending on a checkbox is checked or not.
This is what I have now, but it does not change the background color:

<script>
$(function(){
	$('#GV_NV').on('change', function(){
		if ($(this).is(':checked')) 
		{
			$('#GV_jQuery')
			.css({
				'background-image':'/images/mountings/GV1.png'
			});
		}
		else $('#GV_jQuery').css(
		{'background-image':'/images/mountings/GV2.png'});
	});
});
</script>

Open in new window


<label ... style="background-image:url('/images/mountings/GV1.png" id="GV_jQuery">
.....
<label for="GV_NV">
<input type="checkbox" id="GV_NV" value="1">

Open in new window

kgp43Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
A few pointers

1. Don't duplicate ID's on your page - both checkboxes have the same ID - ID's should be unique
2. When using css with object parameter then use camelCase version of property name

Here is a sample
HTML
    <div id="GV_jQuery" style="width: 132px; height: 150px; background: url('images/foreground1.png') no-repeat center center"></div>
    <label for="GV_NV">
      <input type="checkbox" name="gv_nv" value="0" hidden="hidden" style="display:none;"/>
      <input type="checkbox" id="GV_NV" name="gv_nv" value="1" />
    </label>

Open in new window

jQuery
<script>
$(function(){
  $('#GV_NV').on('change', function(){
    var src = $(this).is(':checked') ? 'images/foreground2.png' : 'images/foreground1.png';
    $('#GV_jQuery').css({backgroundImage: 'url(' + src + ')'});
  });
});
</script>

Open in new window

Working sample here
0
kgp43Author Commented:
Hmm... can't get that to work and i'm not sure where the error is.
The code looks like your example, after some modifications.



<script>
	$(function(){
		$('#GV_NV_CHANGE').on('click', function(){
			var src = $(this).is(':checked') ? '/images/mountings/GV_NV.png' : '/images/mountings/GV.png';
			$('#GV_jQuery').css({backgroundImage: 'url(' + src + ')'});
		});
	});
</script>

Open in new window


<input class="mountinput" id="4455" name="mount_id" value="4455" type="radio">
<label for="4455" style="background-image:url('/images/mountings/GV.png')" id="GV_jQuery">TEXT

<div class="mount_GV_NV">
	<label for="GV_NV_CHANGE">
	<input type="checkbox" name="GV_NV" value="0" hidden="hidden" style="display:none;"/>
	<input type="checkbox" id="GV_NV_CHANGE" name="GV_NV" value="1" />
	<span>TEXT</span>
</div>

Open in new window

0
Julian HansenCommented:
I suspect it is because you have not given your label a height / width.
HTML
	<input class="mountinput" id="4455" name="mount_id" value="4455" type="radio">
	<label for="4455" style="background:url(images/foreground1.png) no-repeat; width: 132px; height: 150px;" id="GV_jQuery">TEXT</label>

	<div class="mount_GV_NV">
		<label for="GV_NV_CHANGE">
		<input type="checkbox" name="GV_NV" value="0" hidden="hidden" style="display:none;"/>
		<input type="checkbox" id="GV_NV_CHANGE" name="GV_NV" value="1" />
		<span>TEXT</span>
	</div>

Open in new window

See revised sample here using your code above
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

kgp43Author Commented:
The background image works perfectly, it just doesn't change upon click.
I can change the background URL in Chrome-source and it changes correctly on the page.

Adding label height and width does not work neither.
0
Julian HansenCommented:
As you can see the sample works.

Did you check your console for errors?

Do you have a link we can look at?

I re-confirmed (copying your code into my template) that it does change so I suspect something else on the page is interfering. If you cannot post a link - can you post the full source of the page?
0
kgp43Author Commented:
It's a danish site with login etc.
Think it's easier to paste the page source.

Thanks for looking into it :)

File attached.
conf.txt
0
Julian HansenCommented:
Check your console - you will see the following

TypeError: $(...).on is not a function
$('#GV_NV_CHANGE').on('click', function(){

Open in new window

In your code - jQuery include
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>

Open in new window

Refer documentation for on - on was only introduced into the JQuery library with version 1.7.

Try including jQuery like this to include the latest version
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kgp43Author Commented:
Haha... that it!
Using the latest jQuery fixed it.... working perfectly now :)

Thanks a lot.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.