Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #205149
    CameronDuthie
    Participant

    Hi there,

    I’m trying to implement a simple fade in/fade out content block which is controlled by a checkbox.

    I’ve managed to set everything up ok but for some reason when you click on the checkbox it won’t ‘check’.

    I’ve set up a fiddle here > https://jsfiddle.net/dfdhssq8/

    Would anyone know how to force the ‘check’ state when clicked?

    Many thanks,

    #205150
    Paulie_D
    Moderator

    If you disable the JQ it does check so there’s that.

    What I suspect is happening is the the the click event is overriding the ‘checking’ function and disabling it.

    EDIT – Yep.

    A quick google search found this SO question – http://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event

    $(".checkbox").change(function() {
    if(this.checked) {
    //Do stuff
    }
    });

    #205151
    CameronDuthie
    Participant

    Thanks @Paulie_D – much appreciated!

    That seems to have done the trick, except when i uncheck it doesn’t fade back – only when it’s checked again does it fade.

    https://jsfiddle.net/dfdhssq8/1/

    Any ideas?

    #205152
    Paulie_D
    Moderator

    First attempt (my JQ is poor)

    https://jsfiddle.net/dfdhssq8/2/

    #205172
    CameronDuthie
    Participant

    @Paulie_D – Great stuff! That seemed to sort it out.

    Can’t be that poor, it’s a damned sight better than mine! :)

    Thanks again sir!

    #259640
    jcpux
    Participant

    I know this is an old thread… but here’s a pure CSS solution https://jsfiddle.net/20obhbok/

    #296458
    larabrian
    Participant

    Also, jQuery is() method is to check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments. If no element fits, or the selector is not valid, then the response will be ‘false’. This method traverses along the DOM elements to find a match, which satisfies the passed parameter.

    if ($(“input[type=checkbox]”).is(“:checked”)) {
    alert(“Checked”);
    }

    #296818
    nicholp63
    Participant

    I know this is an old thread

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.