1

I've created a search function on a website I'm developing but I'm stuck on this part. The search function has a list of categories which the user can check or uncheck in order to filter through the items. The options are almost identical to the way Coursera has implemented their search function. I would like to have all the other checkboxes unchecked when the All Categories option is checked and have the All Categories checkbox unchecked when anything else is unchecked. That sounds a bit confusing but it's exactly what that website has implemented.

Here's an example of the code:

<div class="filter-grade">
    <label class="checkbox">
        <input type="checkbox" id="grade-all" name="grade[]" value="0" checked><b>All Grades</b>
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-9" name="grade[]" value="9">Grade 9
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-10" name="grade[]" value="10">Grade 10
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-11" name="grade[]" value="11">Grade 11
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-12" name="grade[]" value="12">Grade 12
    </label>
</div>
Nart Barileva
  • 1,083
  • 2
  • 9
  • 10
  • 1
    Look at their js files and figure out how they're doing it. You have a working example. – ArrayKnight Aug 13 '13 at 19:36
  • @ArrayKnight I tried that but their js files are all minimized and I tried going through each and searching for 'check' and 'checked' and other keywords but none showed up :/ – Nart Barileva Aug 14 '13 at 17:20
  • Use js beautifier for minified js .Try this [link](http://bit.ly/17sB3iH) for more info . And debugger also offers js beautifiers. Try this [answer](http://stackoverflow.com/a/6318092/1426743) for chrome debugging tool reference. – MD. Sahib Bin Mahboob Aug 15 '13 at 18:06

2 Answers2

3

Despite my comment, I built out a fiddle: http://jsfiddle.net/ctnCn/5/

$('.group input').on('change', function() {
    var $inputs = $(this).siblings('input').add(this),
        $checked = $inputs.filter(':checked'),
        $all = $inputs.eq(0),
        index = $inputs.index(this);

    (index === 0 ? $checked : $all).removeAttr('checked');

    if(index === 0 || $checked.length === 0) {
        $all.attr('checked', 'checked');
    }
});

Update to be project specific: http://jsfiddle.net/ctnCn/6/

$('.filter-grade input').on('change', function() {
    var $inputs = $(this).closest('div').find('input'),

Though I would like to point out that this is not the standard usage of the label element. I would suggest changing your markup to have labels and inputs be siblings (and use the "id" and "for" attributes to link them). Take a look at this reference: http://www.w3schools.com/tags/tag_label.asp My previous fiddle also provides an example of the standard markup convention.

ArrayKnight
  • 6,956
  • 4
  • 17
  • 20
  • +1 Very nice. I would use .prop() though, instead of the attr. – Hanlet Escaño Aug 13 '13 at 19:53
  • It turns out using .prop() and .removeProp() introduces a bug, where .attr() and .removeAttr() do not. Where if you click "apple", click "all fruit", and then click "all fruit" again it would uncheck, despite being told to be checked. – ArrayKnight Aug 13 '13 at 20:11
  • Oh, I thought I saw some comparisons in there. You are right, no need to use .prop() there. – Hanlet Escaño Aug 13 '13 at 20:13
  • Hey thanks for the help. I tried it but something's not working and I'm not sure if it has to do with the structure of my checkboxes. I have a 'filter-subject' div with labels inside and the checkbox inputs inside each label. It would be great if you could help me out! – Nart Barileva Aug 14 '13 at 17:19
  • I would need to have a sample of your html to be able to tweak the fiddle to be specific to your project. – ArrayKnight Aug 14 '13 at 18:50
  • @ArrayKnight I updated my post with the code, thanks again for the help :) – Nart Barileva Aug 15 '13 at 14:21
  • I tried the code on my site and I know the Javascript is functioning since there are visible changes. However, the All Subjects option remains unchecked after the first time I uncheck it. In the Chrome Dev Tools, I can see that the 'checked' attribute is being set to the input but it just doesn't appear checked. Otherwise, the code works great :) – Nart Barileva Aug 16 '13 at 03:45
  • And I know it's slightly odd but I was using the code from the Bootstrap library for layouts and that's how they wrote their example – Nart Barileva Aug 16 '13 at 03:52
2

This code also doing the trick .Get in the right path from the answer of ArraryKnigh. You can also check the fiddle :

$('.group :checkbox').filter("[class!='group-all']").on('change', function() {
     var parentDiv=$(this).parent();
    $('.group-all',parentDiv ).attr('checked',false);
 });

$('.group :checkbox').filter("[class='group-all']").on('change', function() {
    var parentDiv=$(this).parent();
    $('input',parentDiv ).attr('checked',false);
    $(this).attr('checked',true);
 });
Community
  • 1
  • 1
MD. Sahib Bin Mahboob
  • 20,246
  • 2
  • 23
  • 45