web-dev-qa-db-ja.com

jQueryでトグルをクリックします

マウスオーバーでx、yおよびマウスアウトでホバー機能を使用しました。私はクリックでも同じことを試みていますが、うまくいかないようです：

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

divをクリックするとチェックボックスがオンになり、再度クリックした場合はオフになります（クリックの切り替え）。

jqueryonclicktoggle
70
3zzy

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

_ $(".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の「checked」プロパティを直接操作する（つまり、attr()をfetchクリックしたチェックボックスの現在の状態に使用しない）：

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

...等々。

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

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

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

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

次に呼び出します：

$('.offer').find(':checkbox').toggleCheckbox();
27
Justin Tanner

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

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
});
11
Tim Santeford

toggle 関数を使用できます。

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

なぜ1行で行かないのですか？

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
2
Thomas Seres

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

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

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

1
Ross Mehlman

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});
1
miosser
<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>
0
dobs
$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});
0
Alex Barrett

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

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

これに：

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

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

0
inkedmn

最も簡単なソリューション

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});
0
keithics
$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});
0
lod3n

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

0
Kai

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

<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);

});
0
Saeed
    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
0
mahmoh