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

問題は、リストされているすべてのチェックボックスが選択されている場合に何をすべきかがわからないことです。checkedAllチェックボックスをチェックしてください。一部がチェックされている場合、強調表示されたチェックボックスのみがcheckedAllに表示されます。

以下は私が使用している画像です：

画像

4

3 に答える 3

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

UPDATE2

リクエストに基づいてアプローチを更新しました。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 に答える