jquery checkbox if check/uncheck do this

Question

Individual refinements can be selected and de-selected by the user by clicking on the various checkboxes.
When a panel has any number of facets selected, “clear” button needs to be shown.
When any panel has any facets selected, a “clear all” button needs to be shown at the top of the refinements controls.

so based on my getElementById I should be able to achieve this, but I'm not able myself.

// 'Getting' data-attributes using getAttribute
var size = document.getElementById('size');
var base = document.getElementById('base_colour');
var brand = document.getElementById('brand');

//When a panel has any number of facets selected, a “clear” button needs to be shown
$('input').on('click', function(){
    if ($('.option input:checkbox:checked').length > 0)    {
        // any one is checked        
    }
    else    {
       // none is checked
    }

});

http://jsfiddle.net/fsrdd5yz/

possible duplicate of [Find out if radio button is checked with JQuery?](http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery) — Turnip, Oct 21 '14 at 11:58
You seem to be confusing id with data attributes. Your elements have data-id but they don't have id attributes. document.getElementById('size'); won't return an element because there's no element with id='size' — artm, Oct 21 '14 at 12:00
@3rror404 duplication of what? could you read me question carefully please? — DDfrontenderLover, Oct 21 '14 at 12:07
@artm what is the best way for you? I'm not sure I'm able myself — DDfrontenderLover, Oct 21 '14 at 12:12

Arun P Johny · Accepted Answer · 2014-10-21T12:34:57.780

0

You can do something like

var $clearAll = $('.refinements > .clear-filter'),
    $checks = $('.options input[type="checkbox"]'),
    $clear = $('.refinements .panel .clear-filter');
$checks.change(function () {
    var $options = $(this).closest('.options'),
        $clear = $options.prev();
    //if the current checkbox is checked we can show the all and clear buttons
    if (this.checked) {
        $clear.show();
        $clearAll.show();
    } else {
        //if it is an uncheck operation then set the visibility based on overall state of respective checkboxes
        $clear.toggle($options.find('input[type="checkbox"]').is(':checked'))
        $clearAll.toggle($checks.is(':checked'))
    }
})

$clearAll.click(function (e) {
    e.preventDefault();
    $checks.prop('checked', false);
    $(this).hide();
    $clear.hide();
})
$clear.click(function (e) {
    e.preventDefault();
    $(this).next().find('input[type="checkbox"]').prop('checked', false);
    $clearAll.toggle($checks.is(':checked'));
    $(this).hide();
})

Demo: Fiddle

edited Oct 21 '14 at 12:34

answered Oct 21 '14 at 12:04

Arun P Johny

384,651
66
527
531

thanks, that's really nice! but I think the checkbox doesn't seems to work, it doesn't get checked – DDfrontenderLover Oct 21 '14 at 12:09
ok, I fixed the style issue, but by clicking clear, it should clear the checked ones right? and also clear all – DDfrontenderLover Oct 21 '14 at 12:18
@user3699998 `any panel has any facets selected`? – Arun P Johny Oct 21 '14 at 12:19
reading my question, I need to uncheck by clicking clear, or uncheck all by clicking Clear all. would u be able to help please? – DDfrontenderLover Oct 21 '14 at 12:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/63408/discussion-between-user3699998-and-arun-p-johny). – DDfrontenderLover Oct 21 '14 at 12:29
1

Check the link , may be as per your requirements : http://jsfiddle.net/894g227x/6/ – Sharry India Oct 21 '14 at 12:46

jquery checkbox if check/uncheck do this

1 Answers1