2

我想实现类似 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')
});

现在的问题是，如果选中了所有列出的复选框，我将不知道该怎么做，请选中 checkAll 复选框，如果选中了某些复选框，则只会在 checkAll 中显示突出显示的复选框。

下面是我正在使用的图像：

图片

4

3 回答 3

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

演示

于 2013-05-03T08:17:13.017 回答
3

试试这个，并了解如何做。

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

更新2

根据您的要求更新到您的方法。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");
        }
    }
});
于 2013-05-03T09:21:37.643 回答
2

试试这个

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;
}
于 2013-05-03T10:22:38.407 回答