How to attach click event to a css styled checkbox

Question

Having a hard time attaching a click event. I just want to do a few calculations when user checks a checkbox. When a checkbox is checked the span's class becomes 'checked' & 'unchecked' when unchecked. The input checkbox is not displayed & also its attribute 'checked' is not applied, when checked, making it even more difficult.

HTML:

<div class="checkboxBtn" style="border:1px solid blue;">
    <span class="cheked" style="width:20px;height:20px;border:1px solid red;" 
     onclick="CheckSelected();">
    </span>
    <input id="23" type="checkbox" style="border:1px solid green;"></input>
    <label>Compare Now</label>
</div>

None of these worked:

JS:

$(document).ready(function () {
        $(".cheked").click(function () {
            alert(".cheked");
        })
        $(".uncheked").click(function () {
            alert(".uncheked");
        })
    })
function CheckSelected() {
        alert("");
        return false;
    }

enter image description here

Is this not working because, there might be already a click event to show the tick image. If there is any already, how can I do my task, without disturbing the existing functionality.

see this:stackoverflow.com/questions/26925469/on-click-event-in-firefox — Ehsan Sajjad
– Ehsan Sajjad, Commented Nov 18, 2014 at 6:02

prog1011 · Accepted Answer · 2014-11-18 06:06:03Z

2

Try this - Apply class to Checkbox and bind change event.

<div class="checkboxBtn" style="border:1px solid blue;">
    <span class="cheked" style="width:20px;height:20px;border:1px solid red;" 
     onclick="CheckSelected();">
    </span>
    <input id="23" class="chkBx" type="checkbox" style="border:1px solid green;"></input>
    <label>Compare Now</label>
</div>

$(document).ready(function() {    


    $('.chkBx').change(function() {
        if($(this).is(":checked")) {
         $(this).closest('span').removeAttr('class');
         $(this).closest('span').addClass('checked');
        }
        else{
         $(this).closest('span').removeAttr('class');
         $(this).closest('span').addClass('unchecked');
        }                
    });
});

answered Nov 18, 2014 at 6:06

prog1011

3,4856 gold badges34 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pedro Moreira Over a year ago

Just complementing your good answer. If wanted to have only two states, instead of three (undefined, checked and unchecked), it's possible to use only the class 'cheked'. In this case, on the CSS should be used ".checkboxBtn span.cheked" and ".chedkboxBtn span:not(.cheked)"

Amitesh · Accepted Answer · 2014-11-18 06:12:03Z

1

This is because the '.click' handler will attach event to all of the matched element specified by selector at the time of invocation but not to the future element. i.e if an element with class name 'cheked' added later by JavaScript, the click handler will not be attached to that obviously.
Therefore you should add a dummy static class to attach handler. Note that event attached to the checkedbox is fired after changing the checkbox status.

answered Nov 18, 2014 at 6:12

Amitesh

1,5171 gold badge12 silver badges20 bronze badges

Comments

Varun Chakervarti · Accepted Answer · 2014-11-18 06:26:11Z

1

Here is the updated working code.

<div class="checkboxBtn">
    <span id="23_span" class="unchecked"></span>
    <input type="checkbox" id="23"></input>
    <label for="23">Compare Now</label>
</div>


<script>
$(document).ready(function () {
    $("#23").click(function () {
        CheckSelected();
    })
})

function CheckSelected() {
    if(document.getElementById('23').checked) {
        $("#23_span").removeClass("unchecked").addClass("checked");
        alert("checked");
    }
    else {
        $("#23_span").removeClass("checked").addClass("unchecked");
        alert("unchecked");
    }
}
</script>

Now you can provide CSS to your span element according to the requirement.

answered Nov 18, 2014 at 6:26

Varun Chakervarti

1,0428 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to attach click event to a css styled checkbox

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related