2011-06-03 19 views
11

EDIT:答えの男性のためのjQueryのdiv内のすべてのチェックボックスをチェックする方法は?

おかげで、それも正しく見える、それはjsfiddle.netに動作しますが、私のコードでアラートが起動し、まだ何もチェックボックスに起こりません。 :/

 $('#selectChb').click(function(){ 
     $(':checkbox').prop("checked", true); 
     alert("1"); 
    }); 

    $('#deselectChb').click(function(){ 
     $(':checkbox').prop("checked", false); 
     alert("2"); 
    }); 

...

<div id="chbDiv" class="ui-widget ui-widget-content ui-corner-all" > <br></br> 
    <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0"> 
    <tr> 
    <td colspan="2">Following:</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1">&nbsp;</label></td> 
    <td width="45" align="center"><img src="face_01.jpg" width="32" height="32"></td> 
    <td>Andrew Lloyd Webber</td> 
    </tr> 
     <tr> 
    <td width="25" align="left"><input type="checkbox" id="check2" /><label for="check2">&nbsp;</label></td> 
    <td width="25" align="center"><img src="face_02.jpg" width="32" height="32"></td> 
    <td>Richard Branson</td> 
    </tr> 
     <tr> 
    <td width="25" align="left"><input type="checkbox" id="check3" /><label for="check3">&nbsp;</label></td> 
    <td width="25" align="center"><img src="face_03.jpg" width="32" height="32"></td> 
    <td>Dmitry Medvedev</td> 
    </tr> 
</table> 
    <br> 
    <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0"> 
    <tr> 
     <td><a href="#" id="selectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Select All</a>&nbsp; 
     <a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    </table> 
<br> 

</div> 
    <br> 
    <div class="ui-widget ui-widget-content ui-corner-all"> 
+0

どのブラウザでテストしていますか、どのjQueryバージョンですか? –

+0

FireFox、jQueryの最新バージョン、1.6.1 – Roger

答えて

3

$( '#のselectChb')を見つけ、それぞれの項目を反復処理してください(関数(){

alert("c!"); 

    $('#chbDiv').find(':checkbox').each(function(){ 

      $(this).attr('checked', !checkbox.attr('checked')); 

    }); 
}); 
をクリックします。
+0

これは1.6より前であることを参照してください。 Post 1.6では代わりに 'prop();'を使うべきです。 –

1

このコードはチェックボックスを切り替えます。 uncheckは、hrefに与えられたクラスです。

$('.uncheck').bind('click', function(e) { 

    $(':checkbox').prop('checked', ($(':checkbox').prop('checked')) ? false : true); 

    e.preventDefault(); 

}); 
+0

答えに感謝しますが、ちょっと変わっても動作しません。上記の編集を参照してください。 – Roger

10

以下を試し、

Live Demo

+0

答えに感謝しますが、ちょっと変わってもうまくいきません。上記の編集を参照してください。 – Roger

21
$('#selectChb').click(function(){ 
    $(':checkbox').prop("checked", true); 
}); 

この外部他の単一のチェックボックスによれば、すべてのDIV内のチェックボックスをチェックまたはチェックを解除を見つけ由来の究極の解決策でありますチェック/チェックを外すDIV

function checkCheckboxes(id, pID){ 

    $('#'+pID).find(':checkbox').each(function(){ 

     jQuery(this).attr('checked', $('#' + id).is(':checked')); 

    });  

} 

使用法:

<label>check/uncheck 
<input type="checkbox" id="checkall" value="1" 
onclick="checkCheckboxes(this.id, 'mycheckboxesdiv');" > 
</label> 

<div id="mycheckboxesdiv"> 
<input type="checkbox" value="test1" name="test"> 
<input type="checkbox" value="test2" name="anothertest"> 
<input type="checkbox" value="test3" name="tests[]"> 
<input type="checkbox" value="test1" name="tests[]"> 
</div> 

メリットは、独立したチェックボックスのセットを使用し、他のセットからすべての独立のチェックを外す/確認することができます。シンプルで、各チェックボックスのIDやクラスを操作する必要はありません。

+2

私はこれを最初からやっているわけではありません。 "checkall"ボックスを繰り返しクリックしても、すべてが再選択されるわけではありません。 – Adam

4

$("#Div_ID").find('input[type=checkbox]').each(function() { 
      // some staff 
      this.checked = true; 
     }); 
-1

 $(':checkbox').attr("checked", true); 

小道具で

 $(':checkbox').prop("checked", true); 

を交換してみてください、このコードを試してみてくださいは

0

チェックボックスを切り替えるには、これを試してみてくださいいくつかのブラウザのバージョンではサポートされていません。

var bool = false; 
    $('#selectAll').click(function(e){ 
    $('.users-list :checkbox').prop("checked", bool); 
    bool = !bool; 
}); 
1

評判の問題のためにlatisの回答にコメントできませんでした。

本当に後半の種類が、これは私のために働いた(latisへのすべてのクレジット)

function checkCheckboxes(id, pID){ 
     $('#'+pID).find(':checkbox').each(function(){ 
      $(this).prop('checked', $('#' + id).is(':checked')); 
     });  
    } 

は基本的支柱とattrに置き換えます。

+0

"評判の問題のためにlatisの回答にコメントできませんでした。あなたがただコメントをしようとしているのであれば、答えとして投稿しないでください。http://meta.stackexchange.com/a/214174/189840を参照してください。 –

1

私は1回のクリックでチェック/チェックを外したいと思っていたチェックボックスの行を含む(疑似)テーブルを持っていました。

これを達成するために、ループ中にphpを使用して各行にidを割り当て、別のチェックボックスを使って各行を終了させ、クラス "toggle"とその値を囲む行/ divのidと同じにしました。そのよう

$(".toggle").click(function(){ 
    var id = this.value;   
    if ($(this).attr("checked")) { 
     $(this).attr("checked", false);   
     $('#' + id).find(':checkbox').prop("checked", false); 
    } else { 
     $(this).attr("checked", true); 
     $('#' + id).find(':checkbox').prop("checked", true);    
    }   
}); 

・ホープ、このことができます:

<div class="table"> 
    <div class="row" id="rowId"> 
    <span class="td"><input type="checkbox" name="cb1"></span> 
    <span class="td"><input type="checkbox" name="cb2"></span> 
    <span class="td"><input type="checkbox" name="cbn"></span> 
    <span class="td"><input type="checkbox" class="toggle" value="rowId"></span> 
    </div> 
... 
</div> 

は、それから私は、このチェックボックスがクリックされたときに起動するには、次のスクリプトを作成しました。

EDIT:スクリプトからグローバルを削除し、チェック動作を微調整しました。

関連する問題