javascript - チェックボックス内の値を使用して、すべてをチェックしてすべてのチェックを外すオプションを追加する

Question

チェックボックスのグループの電子メールの受信トレイに表示されるように、すべて選択、すべての選択を解除するオプションを作成しようとしています。この例を追加しました。私が取得しようとしている作業モデルは、チェックボックスをクリックすると、特定の値を持つそのグループを選択および選択解除する必要があります。また、リストから単一の名前のチェックを外しても、メインの「すべて選択」チェックボックスをオフにする必要があります。jsfiddle を追加しましたが、正しく動作しません。

$(document).ready(function(){
    $("#selectAll").live("click",function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue=$(this).attr('class');
        clickedValue=clickedValue.replace("select", "");
        $("#modalEntity").attr("value", "group"+ clickedValue).attr("checked", true);      
    });
});

http://jsfiddle.net/EBxSu/

score 2 · Accepted Answer

更新( live を on に変更 & 一部の名前を変更)

まず、次のように同じ ID を持つ要素を持つべきではありません。

<input id="modalEntity" class="entity1" type="checkbox" value="group1" name="India">India
<input id="modalEntity" class="entity2" type="checkbox" value="group1" name="UAE">UAE

jQuery コードを次のように書き直しました。

    $(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        $(this).siblings().find("input.entity").prop("checked", $(this).is(":checked"));
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});

.prop()は、jQuery 1.6 以降でのみ使用してください。

また、HTML を少し書き直しました。ここで更新された jsFiddle を見てください: http://jsfiddle.net/sQVe/EBxSu/8/

何か見逃した場合はコメントしてください。これがあなたの求めているものだと思います。

score 0 · Accepted Answer

私はあなたのJSフィドルをより正しい解決策で更新しました：

http://jsfiddle.net/EBxSu/2/

あなたが間違っていることを指摘してほしいことがいくつかあります、そして多分それはこれであなたを助けるでしょう：

HTMLの「id」属性とclass属性を間違って使用していました。IDは一意である必要があります。クラスは一意である必要はありません。これらを切り替えました。
チェックボックスをオンにしたくない場合を除いて、デフォルトを防ぐ必要はありません。
タグ内にwithテキストがありました-これは無効です。それだけ
タグ内に存在できるので、タグの外側に移動しました
jQueryは複雑であってはなりません。非常に簡単です。HTMLを少し動かしました（リンクを確認してください）。

これで、JavaScriptコードは次のようになります。

$(document).ready(function() {
    $(".selectAll").click(function(e) {
        $(this).siblings('ul').find('input').attr('checked', $(this).is(":checked"));
    });
});

score 0 · Accepted Answer

同じ ID を 2 回使用したため、HTML を少し変更しました ...以下は動作中のスクリプトです...

<ul><li>
Country
<ul>
<input type="checkbox" id="selectAll1" class="selectAll">Select/Deselect All Country
<li>
<input id="modalEntity1" class="entity" type="checkbox" value="group1"   name="India">India
<input id="modalEntity2" class="entity" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>

<li>Company<ul>
<input type="checkbox" id="selectAll2" class='selectAll'>Select/Deselect All Company</a>
<li>
<input id="modalEntity3" class="entity" type="checkbox" value="group2" name="Apple">Apple
<input id="modalEntity4" class="entity" type="checkbox" value="group2" name="Google">Google
</li>
</ul>
</li>
</ul>

jQuery:

$(document).ready(function(){
  $('.selectAll').click(function(){
  var thisStatus = $(this).attr('checked');
    if(thisStatus=='checked'){        
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked','checked');
    }
    else{
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked',false);
    }
});

$('input.entity').click(function(){
var thisStatus = $(this).attr('checked');
    if(thisStatus!=='checked'){
       $(this).parent().parent('ul').find('input.selectAll').attr('checked',false);
    }
    else{
        $("input.entity:checked").each(function(){
        $(this).parent().parent('ul').find('input.selectAll').attr('checked','checked');   
    });
    }

    });
 });

score 0 · Accepted Answer

このチュートリアルに従ってください

http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/

また、このFiddle for Demo をチェックしてください

デモで使用される HTML は次のとおりです。

<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

デモ用の jQuery は次のとおりです。

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});

score 0 · Accepted Answer

コードを少し更新して、複数の ID を削除し、要求されたさまざまなシナリオを処理しました (ユーザーが子を選択した場合は、すべて選択チェックボックスをオフにします)。また、.live() ではなく .on() を使用して jQuery を更新しました。

jQuery は次のようになります。

$(function(){
  $('.selectAll').on('click', function(evt){
    var group = $(this).attr('data-group'),
        isChecked = !!($(this).prop('checked'));
    $('input[value="' + group + '"]').prop('checked', isChecked);    
  })

  $('.entity').on('click', function(evt){
    var group = $(this).attr('value'),
        siblings = $('input[value="' + group + '"]'),
        isChecked = true;
    siblings.each(function(idx, el){
      if(!$(el).prop('checked')) {
        isChecked = false;
        return;
      }
    })
    $('.selectAll[data-group="' + group + '"]').prop('checked', isChecked);
  })
})

そして、更新された HTML:

<ul>
<li>
Country
<ul>
<input type="checkbox" class="selectAll" data-group="group1">Select/Deselect All Country
<li>
<input class="entity" type="checkbox" value="group1" name="India">India
<input class="entity" type="checkbox" value="group1" name="UAE">UAE
...
</ul>
</li>
</ul>

これがフィドルです： http://jsfiddle.net/nBh4L/2/

ありがとう！ジャック

score 0 · Accepted Answer

私はそれを国に対してのみ行いました。HTML:

<ul>
<li>
Country
<ul>
<input type="checkbox" id="selectAll" class="select1">Select/Deselect All Country
<li>
<input class="entity1 countries" type="checkbox" value="group1" name="India">India
<input class="entity2 countries" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>
<li>

JavaScript:

$(document).ready(function(){
$("#selectAll").click(function(){
    if(!$('.countries').attr('checked'))
        $('.countries').attr('checked','checked');
    else
        $('.countries').removeAttr('checked');
});
$('.countries').click(function(){
    var allChecked = true;
    $('.countries').each(function(index, element){
       if(!$(element).attr('checked'))
           allChecked = false;
    });
    if(!allChecked)
        $("#selectAll").removeAttr('checked');        
    else
        $("#selectAll").attr('checked','checked');         
});
});

score 0 · Accepted Answer

私はあなたの解決策を理解していませんでしたが、これが1つです。まず、共通の属性を持つ同様のボタンのグループを保持します。たとえば、 childrelationの値を持ちます。次に、そのグループのセレクター/デセレクターを同じ名前のままにしますが、属性の値をparentに設定します。今、あなたはしなければなりませんrelation

1.母親の状態が切り替えられたときに、同様のすべての子チェックボックスの状態を切り替えます。

$("[relation=parent]").change(function() {
 name = $(this).prop('name');
  $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});

2.子供の状態が切り替えられたときに、それに応じて母親の状態を切り替えます。

$("[relation=parent]").change(function() {
 name = $(this).attr('name');
 $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});
$("[relation=child]").change(function() {
 name = $(this).attr('name');
 if ($(this).attr('checked') == false) {
   $("[relation=parent][name="+name+"]").attr('checked',false);
  }
 else {
   if ($("[name="+name+"][relation=child]:checked").length == $("[name="+name+"][relation=child]").length) {
     $("[name="+name+"][relation=parent]").attr('checked','true');
    }
   }
  });

score 0 · Accepted Answer

ID はページごとに一意であることを意図していますが、コードのマークアップの問題を無視して、意図したとおりに機能するように編集しました。http://jsfiddle.net/xYWWM/5/

$(document).ready(function() {
    $("#selectAll").live("click", function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue = $(this).attr('class');
        clickedValue = clickedValue.replace("select", "");
        var checkboxes = $("#modalEntity[value=\"group" + clickedValue + "\"]");
        checkboxes.attr("checked", !checkboxes.attr("checked"));
});

});

score 0 · Accepted Answer

コードを書く際に注意すべき点がいくつかあります。
1. シンプルに保ちます。2.複数回
使用しないでください。 3. HTML コードを記述します。入れ子にするのは得策ではありません。id
<ul><inputl><li>

これは単純化されたソリューションです。うまくいけば、理解して後で別の状況で実装できるようになるでしょう。

HTML:

<input type="checkbox" id="btn-select-all-1">Select/un-select All
<ul>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
</ul>

Jクエリ:

$(document).ready(function(){

    var btnSelectAll = $("#btn-select-all-1");
    var toSelect = $('.select1')

     //monitor the select_all checkbox for changes
     //and take appropriate action
    btnSelectAll.on('click', function(){
        if(btnSelectAll.is(":checked")){
          toSelect.attr("checked", "checked");
        }else{
          toSelect.removeAttr("checked");
        }
      });

});

jsFiddle: http://jsfiddle.net/U8aFU/

詳細なヘルプとリンク:
チェックボックスが jQuery でチェックされているかどうかを確認する jQuery で
 チェックボックスを「チェック」に設定しますか?

javascript - チェックボックス内の値を使用して、すべてをチェックしてすべてのチェックを外すオプションを追加する

9 に答える 9

Related

Reference