70

マウスオーバーでxを実行し、yとマウスアウトでxを実行するホバー関数を使用しました。クリックでも同じことを試していますが、機能しないようです。

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

をクリックするときにチェックボックスをオンにしdiv、もう一度クリックする場合はオフにします-クリックトグル。

4

15 に答える 15

214

これは、クリックするたびにチェックボックスの現在の「チェック済み」状態を反転することで簡単に実行できます。例：

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

また：

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

または、DOMの「チェック済み」プロパティを直接操作する（つまり、クリックされたチェックボックスの現在の状態をフェッチattr()するために使用しない）：

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...等々。

注：jQuery 1.6以降、チェックボックスはpropnot attr：を使用して設定する必要があります。

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });
于 2009-09-23T16:46:57.503 に答える
27

別のアプローチは、次のようにjqueryを拡張することです。

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

次に、電話します。

$('.offer').find(':checkbox').toggleCheckbox();
于 2010-11-13T06:24:59.050 に答える
11

警告：attr（）またはprop（）を使用してチェックボックスの状態を変更しても、テストしたほとんどのブラウザーで変更イベントは発生しません。チェックされた状態は変化しますが、イベントのバブリングはありません。チェックされた属性を設定した後、変更イベントを手動でトリガーする必要があります。チェックボックスの状態を監視する他のイベントハンドラーがいくつかあり、ユーザーが直接クリックしても正常に機能します。ただし、チェック状態をプログラムで設定しても、変更イベントを一貫してトリガーすることはできません。

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});
于 2011-07-29T20:53:47.957 に答える
7

toggle次の関数を使用できます。

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});
于 2009-09-23T16:46:48.947 に答える
2

なぜ一列にしないのですか？

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
于 2010-11-02T16:57:17.860 に答える
1

名前の付いた単一のチェックボックスchkDueDateと、次のようなクリックイベントを含むHTMLオブジェクトがあります。

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

HTMLオブジェクト（この場合はa <span>）をクリックすると、チェックボックスのチェック済みプロパティが切り替わります。

于 2011-11-08T20:58:47.810 に答える
1

jQuery：最善の方法です。アクションをjQueryに委任します（jQuery = jQuery）。

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
于 2014-03-08T16:33:38.190 に答える
0 
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
于 2009-09-23T17:25:07.840 に答える
0

最も簡単な解決策 

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
于 2012-04-04T04:49:54.697 に答える
0 
$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});
于 2009-09-23T16:46:38.737 に答える
0

JQueryでは、click（）がトグルするための2つの関数を受け入れるとは思いません。そのためにはtoggle（）関数を使用する必要があります：http：//docs.jquery.com/Events/toggle

于 2009-09-23T16:47:56.753 に答える
0

これを変更してみてください：

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

これに：

$(this).find(':checkbox').attr('checked', 'checked');

それでうまくいくかどうかは100％わかりませんが、同様の問題があったことを思い出しているようです。幸運を！

于 2009-09-23T16:44:17.157 に答える
0 
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
于 2012-02-23T22:08:17.590 に答える
0

チェックボックスの値を切り替える別の代替ソリューション：

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});
于 2013-01-26T16:04:15.397 に答える
0 
    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
于 2013-07-16T02:58:58.543 に答える