クリックで切り替えるとjQuery

StackOverflow https://stackoverflow.com/questions/1467228

  •  13-09-2019
  •  | 
  •  

質問

私は使って推移す機能がんx mouseover、y、mouseout.ようにしているのをクリックしが見られるとは思えませんの仕事：

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

たいてチェックボックスをチェックをクリックすると、 div, は、チェックなしの場合はクリックしていましたがクリックで切り替える.

役に立ちましたか？

解決

これは、簡単に各クリックすると、チェックボックスの現在の「確認」状態を反転させることによって行われます。例：

 $(".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'));
 });

または、直接（すなわち、クリックされたチェックボックスのフェッチの現在の状態にattr()を使用していない）プロパティを 'チェック' DOMを操作します：

 $(".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);
 });

他のヒント

別のアプローチは、このような拡張はjQueryになります 

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

次に呼び出します：

$('.offer').find(':checkbox').toggleCheckbox();

警告:を使用 attr() または プロップ() 変更の状態のチェックボックス ない 火災の 変更イベント ほとんどのブラウザか試されます。チェックされた状態に変化がないイベントの気泡.必ずトリガーの変更イベント後に手動で設定の確認のための属性。ったもののその他のイベントハンドラを監視するチェックボックスのチェック状態というのは、フロントは直接ユーザクリック操作。しかし、設定の確認状態でプログラムが一貫してトリガーの変更イベントです。

jQuery1.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
});

あなたは toggle の機能を使用することができます：

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

なぜ1行に？

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

私は次のようにchkDueDateとクリックイベントとHTMLオブジェクトという名前の単一のチェックボックスを持っています 

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

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

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

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

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

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

これに：

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

それはそれを行うかどう100％わからないが、私は同様の問題を抱えて思い出すように見えます。幸運！

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

jQueryのでは、私はそのクリックは（）トグルのための二つの機能を受け入れるとは思いません。あなたはそのためのトグル（）関数を使用する必要があります。 http://docs.jquery.com/Events/toggle の

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

最も簡単な解決策

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

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

別の代替ソリューションは、チェックボックスの値を切り替えることができます：

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

});

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top