1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Click div to do uncheck same effects

Discussion in 'jQuery' started by earngate, Nov 18, 2014.

  1. #1
    Simply we have form that have 4 checkboxs with filter results (hide values when checked)

    check it in new fiddle

    http://jsfiddle.net/ag263ms9/1/

    if you checked Computers checkbox it will filter and hide its results
    ( Result 2, Result 4) to be
    -------
    Result 1
    Result 3
    --------
    then if unchecked, it will show its results again to be
    -------

    Result 1
    Result 2
    Result 3
    Result 4


    >>simply need click div #Computers to uncheck and do same uncheck effects
    (hide its results)

    can you help



    Jquery
    $(document).ready(function(){


    $(':checkbox').click(function(){if($(':checkbox:checked').length >3){
    alert('you can not check more than 3 checkboxes');
    $(this).prop('checked',false);}});})



    ///// Filter Results
    $('div.tags').delegate('input[type=checkbox]','change',function(){var $lis = $('.results > li'),
    $checked = $('input:checked');

    if($checked.length){var selector = $checked.map(function(){return'.'+ $(this).attr('rel');}).get().join('');var $results = $lis.hide().filter(selector);

    if($results.length >0){
    $('.no-results-found').remove();
    $results.show();}else{
    $('.results').append('<li class="no-results-found">No results found.</li>');}}else{
    $lis.show();}

    //click to uncheck

    $('#sso').on('click',function(ev){
    $("#aa").prop("checked",false);var $results = $lis.show().filter(selector);});

    });

    HTML

    <divclass="tags"><label><inputid="ss"type="checkbox"rel="arts"/> Arts </label><label><inputid="aa"type="checkbox"rel="computers"/> Computers </label><label><inputtype="checkbox"rel="health"/> Health </label><label><inputtype="checkbox"rel="video-games"/> Video Games </label></div><p/><p/><hr/><divid="sso">Click to uncheck #Computers</div><p/><p/><hr/>


    <ulclass="results"><liclass="arts computers">
    Result 1
    </li><liclass="video-games">
    Result 2
    </li><liclass="computers health video-games">
    Result 3
    </li><liclass="arts video-games">
    Result 4
    </li></ul>
     
    Solved! View solution.
    earngate, Nov 18, 2014 IP
  2. #2
    Replace this line:
    $("#aa").prop("checked", false);
    Code (markup):
    By:
    $("#aa").prop("checked", false).change();
    Code (markup):
    I hope be useful it
     
    jslirola, Nov 22, 2014 IP
  3. earngate

    earngate Well-Known Member

    Messages:
    102
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Thanks very much @jslirola
    it's solved
     
    earngate, Nov 22, 2014 IP