Issues changing jQuery prop() to hasclass() function

Question

I have a interface that uses the click attribute of a checkbox to show/hide a div.

This is an example chunk of code to show or hide a feature:

Display/Hide jQuery Code

/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
$('#display_linkedin_icon').live("click", function() {
    if ($('#display_linkedin_icon').prop("checked")) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

This works great, however I want to change out the normal checkboxes for some fancy jQuery styled checkbox. I want the same jQuery action to still be fired when the fancy checkbox is checked. The checkboxes are simular to the jQuery iPhone checkboxes.

This is the jQuery code for the fancy checkboxes.

Fancy Checkbox jQuery Code

$('.asw-switch-link a').live('click',function(){
    var $tag = $(this).parent();
    $('a',$tag).toggleClass('active');
    var rel = $('a.active',$tag).attr('rel');
    $tag.next('.plugin-switch-value').val(rel);

    return false;
});

and to display them I use:

case 'fancycheckbox':
        echo '<div class="asw-switch-link">';
        echo '<a href="#" rel="true" class="link-true ';
        echo esc_attr($options[$id]) == 'true' ? 'active' : '' ;
        echo '"></a>';
        echo '<a href="#" rel="false" class="link-false ';
        echo esc_attr($options[$id]) == 'false' ? 'active' : '' ;
        echo '"></a></div>';
        echo '<input id="'.$id.'" name="'.$this->prefix.'_options['.$id.']" class="plugin-switch-value" type="hidden" value="'.esc_attr($options[$id]).'" />';

        if($desc != '')
            echo '<span class="description">'.$desc.'</span>';

        break;

The above code is part of a WordPress plugin I am developing.

The issue

The issue is that I have now changed the normal checkboxes to the fancy checkboxes so the jQuery "click" function does not work any more.

From looking at the fancy checkbox jQuery code I thought I might have to check for the CSS class "active" using the JQuery hasclass() function instead of the .prop('checked") function

I thought something like this might work

/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
$('#display_linkedin_icon').live("click", function() {
    if ($('#display_linkedin_icon').hasclass("active")) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

but it doesn't work.

Any help would be greatly appreciated

HTML Code

This is the HTML source code for the LinkedIn checkbox

    <label for="display_linkedin_icon">Display LinkedIn icon?</label></th>
    <div class="asw-switch-link"><a href="#" rel="true" class="link-true active"></a><a href="#" rel="false" class="link-false "></a></div>
    <input id="display_linkedin_icon" name="asw_options[display_linkedin_icon]" class="plugin-switch-value" type="hidden" value="true" />
<span class="description">URL will be the blog article URL or page URL.</span>

The toggled #LinkedIn div

<ul id="asw-sortable">
<li id="Delicious"><span class="sortable-Delicious"></span><span class="sn">Delicious</span></li>
<li id="Twitter"><span class="sortable-Twitter"></span><span class="sn">Twitter</span></li>
<li id="Facebook"><span class="sortable-Facebook"></span><span class="sn">Facebook</span></li>
<li id="Googleplus"><span class="sortable-Googleplus"></span><span class="sn">Googleplus</span></li>
<li id="Stumbleupon"><span class="sortable-Stumbleupon"></span><span class="sn">Stumbleupon</span></li>
<li id="Pinterest"><span class="sortable-Pinterest"></span><span class="sn">Pinterest</span></li>
<li id="LinkedIn"><span class="sortable-LinkedIn"></span><span class="sn">LinkedIn</span></li>
<li id="Youtube"><span class="sortable-Youtube"></span><span class="sn">Youtube</span></li>

The above code is part of a sortable section. I included all the icons so you can see that once I figure this out for the LinkedIn icon I duplicate the code for the other icons.

Update

OK, so far I have got the #LinkedIn div to show on page load by checking for the hidden form field value. If the hidden field is set to 'true' the #LinkedIn div will be displayed.

jQuery to display #LinkedIn on page load if value = 'true'

$('#LinkedIn').hide();
if ($('#display_linkedin_icon').val() == 'true') {
    $('#LinkedIn').show();
}

I still cannot get the #LinkedIn div to toggle though depending on what the value of the fancy checkbox is.

Have tried this function to toggle the #LinkedIn div

   $('#ch_display_linkedin_icon').click(function() {
        $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
    if ($('#ch_display_linkedin_icon').hasClass('active')) {
        $('#LinkedIn').hide();
    }
    else {
        $('#LinkedIn').show();
    }
});

I have added an ID to the fancy checkbox. This above jQuery DOES start to toggle the #LinkedIn div however not always in the correct order. Almost there

How doesn't it work? Have you tried spelling `hasclass` `hasClass`? — Blender, Sep 29 '12 at 00:58

iambriansreed · Accepted Answer · 2012-09-29T01:09:23.240

0

Not to oversimplify but this should work fine:

$('#display_linkedin_icon').click(function() {
    $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
});

I use the non-deprecated .on() vs .live().

I toggle the active class on the clicked element.

Last I toggle #LinkedIn based of the clicked element .hasClass().

Poetry.

edited Sep 29 '12 at 01:09

answered Sep 29 '12 at 00:58

iambriansreed

21,935
6
63
79

Why not just `.toggle()`? You're only changing the starting toggle state once. – Blender Sep 29 '12 at 01:01
@Blender I thought about that but its posible the `active` class is on but the `#LinkedIn` is hidden when the page loads. Make sense? – iambriansreed Sep 29 '12 at 01:04
Thanks iambriansreed. I tried the code but it doesn't show or hide the LinkedIn div. Basically if the LinkedIn checkbox (that is now displayed as a fancy checkbox ) is changed to "Yes" then further down the page a div with the ID of #LinkedIn will be either displayed or hidden. – Jason Sep 29 '12 at 01:05
@Jason try that updated script. You might need to drop a little HTML. – iambriansreed Sep 29 '12 at 01:09
Sorry for the delay. I appreciate you help iambriansreed. Tried the code however it is not working yet. I am just checking on the value of the hidden form field for the fancy checkbox. – Jason Sep 29 '12 at 01:21

Sushanth -- · Answer 2 · 2012-09-29T01:09:20.347

0

Try setting a variable outside the scope of the event and increment on every click. If odd then show else hide the Icon

var checkCount = 0;
$('#display_linkedin_icon').live("click", function() {
    checkCount ++;
    if (!(checkCount  % 2== 0)) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

edited Sep 29 '12 at 01:09

answered Sep 29 '12 at 00:59

Sushanth --

55,259
9
66
105

Issues changing jQuery prop() to hasclass() function

2 Answers2