jQueryで「すべてをチェック」/「すべてを選択」チェックボックスを作成しますか？

私はチェックボックスが少なく、そのうちの1つは「すべて選択」で、その他はスタンドアロンのものです。jQueryで「すべてをチェック」/「すべてを選択」チェックボックスを作成しますか？

要件は、「すべて選択」チェックボックスを

Iftheのユーザーのクリックが、その後、他のすべてのチェックボックスがチェックされるということです。
[すべてを選択]チェックボックスをオフにすると、すべてがチェックされなくなります。
個々のチェックボックスのいずれかがチェックされていない場合、「すべて選択」はチェックされません。
4つのチェックボックスをすべてオンにすると、「すべて選択」がチェックされます。

私はJQueryを使用しています。私は最初の2つを達成することはできますが、最後の2つを達成することはできません。私のコードは以下の通りです

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
    <TITLE> Check/UnCheck All Checkbox </TITLE> 

    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript"> 

    function SelectDeselect() 
    { 
     if(document.getElementById('chkSelectDeselectAll').checked) $("INPUT[type='checkbox']").attr('checked',true); 

     else $("INPUT[type='checkbox']").attr('checked',false); 
    } 

    </script> 

</HEAD> 

<BODY> 


    <input type="checkbox" id="chkSelectDeselectAll" onClick="SelectDeselect()">Select All 
    <br><br> 

    Select your hobbies: 
    <br><br> 

    <input type="checkbox" id="chkTV">Watching T.V.<br><br> 

    <input type="checkbox" id="chkGardening">Gardening<br><br> 

    <input type="checkbox" id="chkSwimming">Swimming<br><br> 

    <input type="checkbox" id="chkChess">Playing Chess<br><br> 

</BODY> 
</HTML>

残りの実装にはヘルプが必要です。

おかげ

出典

2012-05-03 Anonymous

？ JavaScriptのバインドをjQueryでクリックするのではなく、HTMLマークアップに追加します。 – voigtan

少し古い（1.2.6）.Sir私はJQueryにあまり堪能ではありません。現在のプロジェクトで実装しているので、ちょっと勉強しました。 –

1.2.6 "古い" ...それは**古代**です:( –

-1

function checkOne(){ 
    if( document.getElementById('chkTV').checked && 
      document.getElementById('chkGardening').checked && 
    document.getElementById('chkSwimming').checked && 
    document.getElementById('chkChess').checked){ 
     document.getElementById('chkSelectDeselectAll').checked = true; 
    } 
    else{ 
     document.getElementById('chkSelectDeselectAll').checked = false; 
    } 

    } 



    <input type="checkbox" id="chkTV" onclick="checkOne">Watching T.V.<br><br> 

    <input type="checkbox" id="chkGardening" onclick="checkOne">Gardening<br><br> 

    <input type="checkbox" id="chkSwimming" onclick="checkOne">Swimming<br><br> 

    <input type="checkbox" id="chkChess" onclick="checkOne">Playing Chess<br><br>

出典

2012-05-03 05:12:38

答えはより一般的であったはずです。チェックボックスの数がn個あれば便利です。すべてのチェックボックスをそのようなIF文に入れることはできません！ –

は、多分それは、「すべて選択」チェックボックスにいくつかの説明に

Iftheユーザーのクリックを与え、その後、他のすべてのチェックボックスがチェックされます。

$("#chkSelectDeselectAll").click(function(){ 
    if($("#chkSelectDeselectAll").is(':checked')) 
{ 
     ("checkbox").each(function(){ 
      $(this).attr('checked', 'checked'); 
      }); 
} 
    });

[すべてを選択]チェックボックスをオフにすると、すべてがチェックされなくなります。

$("#chkSelectDeselectAll").click(function(){ 
    if(!$("#chkSelectDeselectAll").is(':checked')) 
{ 
    ("checkbox").each(function(){ 
      $(this).removeAttr('checked'); 
      }); 
    } 
});

、個々のチェックボックスのいずれかがチェックされていない場合は、「すべてを選択するには、」未チェックになります。

$("checkbox").click(function(){ 
    ("checkbox").each(function(){ 
    if($(this).is(':checked')) 
    { 
      $("#chkSelectDeselectAll").removeAttr('checked'); 
    } 
      }); 
    });

4つのチェックボックスをすべてオンにすると、「すべて選択」がチェックされます。

$("checkbox").click(function(){ 
    ("checkbox").each(function(){ 
    var yesno=true; 
    if(!$(this).is(':checked')) 
    { 
      yesno=false; 
    } 
      }); 
    if(yesno) 
    { 
    $("#chkSelectDeselectAll").attr('checked', 'checked') 
    } 
    });

出典

2012-05-03 05:21:17

すべてのチェックボックスの状態を確認してください。

~~ワーキングデモ： http://jsfiddle.net/XSdjQ/1/~~

~~更新デモ：あなたのマークアップとうまく動作します http://jsfiddle.net/XSdjQ/2/~~

さらに別のデモ：http://jsfiddle.net/XSdjQ/3/

出典

2012-05-03 05:22:04 rgin

が正しく動作しません！ –

あなたはこのコードを試すことができます。

$(document).ready(function(){ 
    $('#chkSelectDeselectAll').toggle(function(){ 
       $('input[type=checkbox]').each(function(){ 
        $(this).attr('checked',true); 
       }); 

    },function(){ 
       $('input[type=checkbox]').each(function(){ 
        $(this).removeAttr('checked'); 
       }); 
    }) 
});

ありがとうございます。

出典

2012-05-03 05:24:04 Chandresh

$(document).ready(function() { 

    $('#main').change(function() { 

     if ($(this).is(':checked')) { 
     $('input[name="hi[]"]:checkbox').attr('checked', true);   

     } else { 

      $('input[name="hi[]"]:checkbox').attr('checked', false); 
     } 
    }); 


$('input[name="hi[]"]:checkbox').change(function() { 
     var chkLength = $('input[name="hi[]"]:checkbox').length; 
     var checkedLen = $('input[name="hi[]"]:checkbox:checked').length;  
     if (chkLength == checkedLen) { 
      $('#main').attr('checked', true); 
     } else { 
      $('#main').attr('checked', false); 
     } 
    }); 
});

チェックフィドル：http://jsfiddle.net/4vKwm/10/

出典

2012-05-03 05:24:39

私は本当にあなたのjQueryライブラリを更新し、聴きたいすべてのチェックボックスにクラスを追加しようとすることをお勧めいたしますが、う：

var collection = $("input:checkbox:not(#chkSelectDeselectAll)").change(function() { 
    selectAll[0].checked = collection.filter(":not(:checked)").length === 0; 
}); 
var selectAll = $("#chkSelectDeselectAll").change(function(){ 
    collection.attr('checked', this.checked); 
});

手動ですべてをチェックするか（またはすべてを選択したときに選択を解除する）、機能が追加された後、#chkSelectDeselectAllをトグルします。デモ：あなたはjQueryのを使用しているバージョン

http://jsfiddle.net/voigtan/yTWKY/1/

出典

2012-05-03 05:32:56 voigtan

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  

<script type="text/javascript"> 
     $(function() { 
      $("[id*=chkAll]").bind("click", function() { 
       if ($(this).is(":checked")) { 
        $("[id*=chkvalue] input").attr("checked", "checked"); 
       } else { 
        $("[id*=chkvalue] input").removeAttr("checked"); 
       } 
      }); 
      $("[id*=chkvalue] input").bind("click", function() { 
       if ($("[id*=chkvalue] input:checked").length == $("[id*=chkvalue] input").length) { 
        $("[id*=chkAll]").attr("checked", "checked"); 
       } else { 
        $("[id*=chkAll]").removeAttr("checked"); 
       } 
      }); 
     }); 
</script> 



<asp:CheckBox ID="chkAll" Text="Select All Test Patterns" runat="server" /> 

<asp:CheckBoxList ID="chkvalue" runat="server"> 
    <asp:ListItem Text="On/Off" /> 
    <asp:ListItem Text="Alternate Rows" /> 
    <asp:ListItem Text="Alternate Columns" /> 
    <asp:ListItem Text="Alternate Diagonals" /> 
    <asp:ListItem Text="Running Row" /> 
    <asp:ListItem Text="Running Columns" /> 
</asp:CheckBoxList>

出典

2016-04-13 07:50:31 Raj

jQueryで「すべてをチェック」/「すべてを選択」チェックボックスを作成しますか？

答えて

関連する問題