Gmail就像Checkbox功能一样

Question

我想实现像复选框功能一样的gmail： 在其中单击CheckAll复选框时，将选中/取消选中所有列出的复选框，如果选中了所有列出的复选框，则将选中CheckAll复选框。如果只选中了一些复选框，则会出现 - 符号复选框。

我使用div实现逻辑。 这是逻辑： 的 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;
}

脚本： //更新的脚本：

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

现在的问题是，如果选中所有列出的复选框，我无法做什么，选中要检查的复选框，如果选中了一些复选框，则复选框将显示在checkedAll中。

以下是我正在使用的图片：

Answer 1

$(".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

Answer 2

试试这个并了解如何做到这一点。

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">

脚本，

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

的更新 的

---

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 的

---

根据您的请求更新了您的approch。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>

脚本，

$(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");
        }
    }
});

Answer 3

试试这个

  

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

我更改了脚本：

$(".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'))
});

也添加了两个新的css类......

.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;
}