0

I've tried a lot of diverse solutions given here on StackOverflow, but none of them worked for me.

I must add a class to a specific div when the checkbox assigned to it is selected, but I can't figure out what is not working for me!

Here is the code, hope you can help me!

HTML

<body>
    <div class="riquadro_introduzione">
        <p class="title">Selezione opere</p>
        <p>Ora inizia a creare il tuo itinerario!</br>Queste sono le opere che il museo ti consiglia.</p>
        <p>&nbsp;</p>
        <p>Seleziona l'opera tramite l'apposita checkbox accanto al nome dell'opera stessa.</br></br>
            Premi il pulsante AVANTI quando hai concluso le tue scelte!</p>
    </div>
    <div class="riquadro_content">
        <div style="padding-top:20px;padding-left:11px;">
            <div class="icona_galleria num1" id="divOpera1">
                <p class="label-galleria">Opera 1</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera1"/>
                    <label for="chkOpera1"></label>
                </div>
            </div>
            <div class="icona_galleria num2">
                <p class="label-galleria">Opera 2</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera2"/>
                    <label for="chkOpera2"></label>
                </div>
            </div>
            <div class="icona_galleria num3">
                <p class="label-galleria">Opera 3</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera3"/>
                    <label for="chkOpera3"></label>
                </div>
            </div>
            <div class="icona_galleria num4">
                <p class="label-galleria">Opera 4</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera4"/>
                    <label for="chkOpera4"></label>
                </div>
            </div>
            <div class="icona_galleria num5">
                <p class="label-galleria">Opera 5</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera5"/>
                    <label for="chkOpera5"></label>
                </div>
            </div>
            <div class="icona_galleria num6">
                <p class="label-galleria">Opera 6</p>
                <div class="squaredThree">
                    <input type="checkbox" id="chkOpera6"/>
                    <label for="chkOpera6"></label>
                </div>
            </div>
            <div class="pulsante">
                   <a href="javascript:void(0);" style="left:40%;">Avanti</a>
            </div>
        </div>
    </div>
</body>

jQuery

<script> 
    $(document).ready(function() {
        $('#chkOpera1').change(function(){
            if($(this).is(":checked")) {
                $('#divOpera1').addClass("opera_selezionata");
            }
        });
    });
</script>

EDIT:

CSS for the checkboxes:

.squaredThree {
width: 20px;    
position: relative;
left:140px;
top: -36px;
}

.squaredThree label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left:-2px;
border-radius: 4px;

-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);

background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
5
  • It does add a class to the given div: jsfiddle.net/2Lzfm You just asigned three classes to the element: icona_galleria, num1 and opera_selezionata.
    – nkmol
    Commented Nov 11, 2013 at 10:15
  • Maybe it's because I've styled the checkboxes, following a tutorial on a website. Can you check the code I added in the question for the checkboxes? Thank you
    – The Condor
    Commented Nov 11, 2013 at 10:24
  • Even with your provided CSS it works: jsfiddle.net/2Lzfm/2 What do you want to do with the class opera_selezionata?
    – nkmol
    Commented Nov 11, 2013 at 10:33
  • I don't know why, but it's not working for me, although it works on your fiddle. I uploaded the page on a server, so you can check yourself.. abacond.com/progettoUni/selezione_opere.html
    – The Condor
    Commented Nov 11, 2013 at 10:44
  • Check my answer below, hope it helped!
    – nkmol
    Commented Nov 11, 2013 at 10:57

4 Answers 4

2

The only problem I'm seeing if the checkbox is unchecked then the class is not removed

$(document).ready(function () {
    $('#chkOpera1').change(function () {
        $('#divOpera1').toggleClass("opera_selezionata");
    })
});

Demo: Fiddle

Since you have multiple checkboxes and if you want to apply the same logic to other checkboxes also then

$(document).ready(function () {
    $('.icona_galleria input[type="checkbox"]').change(function () {
        $(this).closest('.icona_galleria').toggleClass("opera_selezionata");
    })
});

Demo: Fiddle

7
  • Maybe it's because I've styled the checkboxes, following a tutorial on a website. Can you check the code I added in the question for the checkboxes? Thank you
    – The Condor
    Commented Nov 11, 2013 at 10:28
  • I don't know why, but it's not working for me, although it works on your fiddle. I uploaded the page on a server, so you can check yourself.. abacond.com/progettoUni/selezione_opere.html
    – The Condor
    Commented Nov 11, 2013 at 10:43
  • @TheCondor where is the page url Commented Nov 11, 2013 at 10:44
  • @TheCondor when you click on the checkbox what should happen? Commented Nov 11, 2013 at 10:51
  • It should add the class opera_selezionata, which adds a blue border around the image to tell the user that is currently selected. If you try to add the class manually from the Chrome developer tools window (press F12, or use Firebug in Firefox) you'll see what I'm trying to achieve. Thanks for your help though!
    – The Condor
    Commented Nov 11, 2013 at 10:54
0
<script> 
$(document).ready(function() {
$('#chkOpera1').change(function(){
if($(this).is(":checked"))
    $(this).parents(".icona_galleria")[0].addClass("opera_selezionata");  
})
});
</script>

$(this).parents(".icona_galleria")[0] is getting all of the parents of the checkbox and finding the one with the icona_galleria class which is the container div and then getting the first item in the returned array then adding the class to that.

0

i think this more correctly

$(document).ready(function () {
    $('#chkOpera1').change(function () {
        $('#divOpera1').toggleClass("opera_selezionata", this.checked);
    })
});
0

As i look in inspectors mode to your page, I immediately see a error:

Uncaught TypeError: Cannot set property 'onclick' of null

Now there is nothing wrong with your code, but still it can't find your element in the DOM.

Why?

It's because your code tries to find the element before it is even loaded.

Solution

Let your code excecute when the page has been loaded. You have already wrapped you code inside the document.ready(function { }). To make sure everything is loaded before you start your javascript/jQuery code you should put your script at the bottom of the <body> element:

<body>

<!-- Any Html code -->

<script> 
    $(document).ready(function() {
        $('#chkOpera1').change(function(){
            if($(this).is(":checked")) {
                $('#divOpera1').addClass("opera_selezionata");
            }
        });
    });
</script>
</body>

I hope this works for you!

3
  • No, it doesn't work even this way, it gives me this error: "Uncaught ReferenceError: $ is not defined"
    – The Condor
    Commented Nov 11, 2013 at 11:04
  • That's because you haven't linked you jQuery properly. Note that you should link the jQuery in the <head> and you jQuery code at the bottom <body>. Let me know if this was the case.
    – nkmol
    Commented Nov 11, 2013 at 11:11
  • Yep, another user make me feel stupid about that 2 minutes ago :) that solved my problem, thanks for your help though!
    – The Condor
    Commented Nov 11, 2013 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.