0

jqueryまたはjavascriptを使用して、すべてのチェック/チェック解除ボタンが必要でした。ネットで入手可能な例を使用してみましたが、何もうまくいきませんでした。

<li>
    <span class="checkbox unchecked">
          <label for="check1"></label>
          <input type="checkbox" id="select" name="select">
    </span>
</li>

これは、いくつかの情報を含むループにすべてのチェックボックスを配置する方法です。これを別のjspページから呼び出して、別のフォームに配置しました。考えられる例を試しましたが、これらのコードを機能させることができませんでした。

助けてください。

私はこのjQueryを試しました：

<script language="javascript">
$(function(){
    $("#select").click(function () {
        $('#check1').attr('checked', this.checked);
    });
    // if all checkbox are selected, check the select checkbox
    // and viceversa
    $("#check1").click(function(){
        if($("#check1").length == $("#check1:checked").length) {
            $("#select").attr("checked", "checked");
        } else {
            $("#select").removeAttr("checked");
        }

    });
});
</script>

このチェックボックスのデザインと CSS を変更することは許可されていません。

4

6 に答える 6

1

これが必要だと思います。id を使用する代わりに、クラスを使用してください。ページのヘッド部分にスクリプトを配置してください。

<script>
    $(document).ready(function(){
        $(".check").click(function(){
             if($(".checkall:checked").length<=0) {
                 $(".checkall").prop('checked', true);
             } else {
                 $(".checkall").removeAttr("checked");
             }

          });
         });

</script>

そしてhtml部分は

<ul>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
</ul>
<input type="button" name="test" value="test" class='check'/>
于 2013-01-28T08:13:11.860 に答える
0 
<a rel="env" href="#select_all">Select All</a>
<a rel="env" href="#select_none">Select None</a>    

<ul id="env">
    <input type="checkbox"> data
    <input type="checkbox"> data
</ul>

<script>
    $("A[href='#select_all']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
        return false;
    });

    $("A[href='#select_none']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);
        return false;
    });
</script>
于 2013-01-28T07:20:00.703 に答える
0

あなたのコードにある欠陥のいくつか

1）セレクターが間違っ$("#selectall").click(function () {ています。これはID selectallの入力を選択しますが、あなたの場合、IDselectallの要素はありません。

これで十分です。

 $("#select").click(function () { //this select the input with id select..which is selectall in your case..

2）$('#check1').attr('checked', this.checked);これはID check1のチェックボックスを見つけます...あなたの場合は複数であると思います..したがって、複数の要素が同じIDを持つことはできないため、クラスに変更して呼び出します

 $('.check1').attr('checked', this.checked);

最終出力..コードのマストを変更せずに

 $(function(){
     $("#select").click(function () {
          $('.check1').attr('checked', this.checked);
     });

     // if all checkbox are selected, check the selectall checkbox
     // and viceversa
     $(".check1").click(function(){
         if($(".check1").length == $(".check1:checked").length) {
             $("#select").attr("checked", "checked");
         } else {
             $("#select").removeAttr("checked");
         }

      });
  });
于 2013-01-28T07:26:38.637 に答える
0

ページ上の複数の要素に同じ ID を与えることはできません。idそれらを次のように変更してみてくださいclass:

ここでフィドルを作成しました：http://jsfiddle.net/zqPXc/

使用される html:

<ul>
<li> <span class="checkbox unchecked">
      <label for="selectall">selectall</label>
    <input type="checkbox"  name="select"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
</ul>

使用したjQuery:

$(document).on('click', '[name="select"]', function () {
  $('.check1').prop('checked', ($('[name="select"]:checked').length) ? true : false);
});

$(document).on('click', ".check1", function () {
   $('[name="select"]').prop("checked", ($('.check1:checked').length == $('.check1').length) ? true : false);
});
于 2013-01-28T07:28:26.440 に答える
0

jQuery を使用したチェックボックスの切り替えに関するブログ記事をブログ リンクに書きました。

これらの線に沿った何かがあなたの場合に当てはまる可能性があります。#checked1また、複数のチェックボックスではなく、クラスに変更したいチェックボックスに名前を付けたことにも気付きました。

$(document).ready(function() {
    /** Toggle child checkboxes based on the #selectall's checked state. */
    $("#selectall").click(function() {
        this.checked = !(this.checked == true);
        var ischecked = !(this.checked == true);

        /** Set the checkboxes. */
        $("#grdWhatever input:checkbox").attr("checked", function() {
            this.checked = ischecked;
        });
    });
});
于 2013-01-28T07:28:45.110 に答える
0

#selectページ上の他のすべてのチェックボックスの状態を制御する1 つのマスター チェックボックスがあるとします。

$('#select').on('click', function(){
    if(this.checked) $('input:checkbox').not($(this)).attr('checked', true);
    else $('input:checkbox').not($(this)).attr('checked', false);
});
于 2013-01-28T07:28:51.450 に答える