Gmail like Checkbox functionality

I want to implement gmail like checkbox functionality: In which If CheckAll checkbox is clicked, all listed checkbox will be selected/unselected, if all listed checkbox are selected, CheckAll checkbox will be checked. and if only some checkbox are checked, - sign checkbox will be appear.

I have implement logic using div. Here is the logic: HTML:

<table id="ViewTable" class="tableEffectfull">
    <thead>
        <tr>
            <th class="selectCol"><div class="unCheckedCheckBoxAll"></div></th>
            <th class="nosCol">Products</th>
        </tr>
    </thead>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>PQRS</td>
    </tr>
</table>

CSS:

.unCheckedCheckBox{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(images/prettyCheckable-green.png) top left no-repeat;
}
.CheckedCheckBox{
   background: transparent url(images/prettyCheckable-green.png) 0 -60px;
}
.unCheckedCheckBoxAll{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(images/Checkable-green.png) top left no-repeat;
}
.CheckedCheckBoxAll{
   background: transparent url(images/Checkable-green.png) 0 -60px;
}

Script: //updated scripts:

$(".unCheckedCheckBox").click(function () {
  $(this).toggleClass('CheckedCheckBox');
  $('.unCheckedCheckBoxAll').toggleClass('CheckedCheckBoxAll', $('.CheckedCheckBox').length == $(".unCheckedCheckBox").length)
});
$(".unCheckedCheckBoxAll").click(function () {
  $(this).toggleClass('CheckedCheckBoxAll');
  $('.unCheckedCheckBox').toggleClass('CheckedCheckBox')
});

Now the problem is I am not getting what to do if all listed checkbox are selected, make checkedAll checkbox to be checked and if some are checked only highlighted checkbox will be display in checkedAll.

Below is the Image I am using:

Answers


Try this

http://jsfiddle.net/VrkA3/1/

I have changed the script :

$(".unCheckedCheckBox").click(function () {
$(this).toggleClass('CheckedCheckBox');
if ($('.CheckedCheckBox').length == 2) {
    $('.CheckBoxAll').addClass('CheckedCheckBoxAll').removeClass('minusCheckBoxAll')
} else {
    $('.CheckBoxAll').removeClass('CheckedCheckBoxAll')
    if ($('.CheckedCheckBox').length == 0) 
$('.CheckBoxAll').removeClass('minusCheckBoxAll')
        else $('.CheckBoxAll').addClass('minusCheckBoxAll')
    }
});

$(".CheckBoxAll").click(function () {
    $(this).removeClass('minusCheckBoxAll')
    $(this).toggleClass('CheckedCheckBoxAll');
    $('.unCheckedCheckBox').toggleClass('CheckedCheckBox',   $(this).is('.CheckedCheckBoxAll'))
});

added a two new css classes too...

.unCheckedCheckBox {
    width: 25px;
    height: 25px;
    margin-top: -4px;
    background: red top left no-repeat;
}
.CheckedCheckBox {
    background: pink 0 -60px;
}
.CheckBoxAll {
    background: white;
}
.unCheckedCheckBoxAll {
    width: 25px;
    height: 25px;
    margin-top: -4px;
    background: blue top left no-repeat;
}
.CheckedCheckBoxAll {
    background: black 0 -60px;
}
.minusCheckBoxAll {
    background: green 0 -60px;
}

$(".unCheckedCheckBox").click(function () {
  $(this).toggleClass('CheckedCheckBox');
    $('.unCheckedCheckBoxAll').toggleClass('CheckedCheckBoxAll', $('.CheckedCheckBox').length == $(".unCheckedCheckBox").length)
});
$(".unCheckedCheckBoxAll").click(function () {
  $(this).toggleClass('CheckedCheckBoxAll');
  $('.unCheckedCheckBox').toggleClass('CheckedCheckBox', $(this).is('.CheckedCheckBoxAll'))
});

demo


Try this and get an idea about how to do it.

http://jsfiddle.net/FdEhf/

<input type="checkbox" class="all" value="all">Check all
<br/>
<input type="checkbox" value="1">
<br/>
<input type="checkbox" value="2">
<br/>
<input type="checkbox" value="3">
<br/>
<input type="checkbox" value="4">
<br/>
<input type="checkbox" value="5">
<br/>
<input type="checkbox" value="6">
<br/>
<input type="checkbox" value="7">
<br/>
<input type="checkbox" value="8">

Script,

$("input.all").on("change", function (e) {
    $(':checkbox').prop("checked",$(this).is(":checked"))
});

Update


http://jsfiddle.net/FdEhf/2/

$(document).on("change", ".all:not('.minus')", function (e) {
    $(':checkbox').prop("checked", $(this).is(":checked"));
});

$(document).on("change", ".all.minus", function (e) {
    $(':checkbox').prop("checked", false);
    $(".all").removeClass("minus");
});
$(document).on("change", ":checkbox:not('.all')", function (e) {
    if ($(':checkbox').not(".all").length == $(':checkbox:checked').not(".all").length) {
        $(".all").prop("checked", true).removeClass("minus");
    } else {
        $(".all").prop("checked", false).addClass("minus");
        if ($(':checkbox:checked').not(".all").length == 0) {
            $(".all").removeClass("minus");
        }
    }
});

UPDATE2


Updated to your approch based on your request.http://jsfiddle.net/FdEhf/4/

<table id="ViewTable" class="tableEffectfull">
    <thead>
        <tr>
            <th class="selectCol">
                <div class="unCheckedCheckBoxAll"></div>
            </th>
            <th class="nosCol">Products</th>
        </tr>
    </thead>
    <tr>
        <td>
            <div class="unCheckedCheckBox"></div>
        </td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td>
            <div class="unCheckedCheckBox"></div>
        </td>
        <td>PQRS</td>
    </tr>
</table>

Script,

$(document).on("click", ".unCheckedCheckBoxAll:not('.minus')", function (e) {
    $(this).toggleClass('CheckedCheckBoxAll');
    $('.unCheckedCheckBox').toggleClass('CheckedCheckBox');
});

$(document).on("click", ".unCheckedCheckBoxAll.minus", function (e) {
    $('.unCheckedCheckBox').removeClass('CheckedCheckBox');
    $(this).removeClass("minus");
});
$(document).on("click", ".unCheckedCheckBox", function (e) {
    $(this).toggleClass("CheckedCheckBox");
    if ($('.unCheckedCheckBox').length == $('.CheckedCheckBox').length) {
        $(".unCheckedCheckBoxAll").removeClass("minus");
    } else {
        $(".unCheckedCheckBoxAll").removeClass("CheckedCheckBoxAll").addClass("minus");
        if ($('.CheckedCheckBox').length == 0) {
            $(".unCheckedCheckBoxAll").removeClass("minus");
        }
    }
});

Need Your Help

Safari Mac OSX Backspace Issues

c# javascript html silverlight safari

Is there anyone out there who knows how to handle the behavior of Safari Web Browser that sets the current page to the previous page whenever users were pressing backspace key? I'm currently experi...

DevExpress GridControl image column displays images like System.Byte

c# winforms devexpress xtragrid

I have a table with person data which are Name, Surname, Code and Photo of persons. And when I select persons from table like and send the result to DevExpress GridControl it shows Name, Surname an...