jQueryチェックボックスの変更とクリックイベント


564

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

ここ.change()では、チェックボックスのステータスでテキストボックスの値を更新します。.click()チェックを外したときのアクションの確認に使用します。ユーザーがキャンセルを選択すると、チェックマークは復元されますが、.change()確認前に発生します。

これにより、一貫性のない状態になり、チェックボックスをオンにすると、テキストボックスにfalseと表示されます。

キャンセルに対処し、テキストボックスの値をチェックの状態と一致させるにはどうすればよいですか?


1
これはFFとChromeで動作し、IE 8で説明された動作をします。そのため、これを機能させるために必要なブラウザーと、エラーが表示されているブラウザーを確認することが重要になる場合があります。
kasdega 2011

それは最高ではありませんが、ここで私にとってはうまくいくと私は信じています:http : //jsfiddle.net/Skooljester/2Xxcn/
ayyp 2011

回答:


904

JSFiddleでテストされ、必要なことを行います。このアプローチには、チェックボックスに関連付けられたラベルがクリックされたときに起動するという追加の利点があります。

更新された回答:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

元の回答:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

128
ただのメモ、this.checked代わりに使用する方がはるかに高速です$(this).is(':checked')jsperf.com/prop-vs-ischecked/5
Dakota

37
@Dakota確かに遅いですが、まだ60万オペレーション/秒の話をしています。つまり、ミリ秒あたり600回です。これがWebページでパフォーマンスの問題を引き起こし始めたら、JavaScriptを再評価する必要があるかもしれません;)ただし、コードでパフォーマンスメトリックを理解することは良いことです。ありがとう。
マイクU

51
@MikeU:時期尚早の最適化については同意しますが、this.checked+ネイティブJavaScriptを書く方がはるかに短いため、一般的に使用する価値があります(200倍から300倍速いことは別として)。
Levite 2015年

11
.attr()の代わりに.prop()をお勧めします。後者はすべてのケースで機能するわけではないため、jQueryが.prop()を推奨していると思います。
kabadisha 2016年

2
$( '#textbox1')。val(this.checked);の[this]は ドキュメントを参照します。$( '#textbox1')。val($( '#checkbox1')。is( ':checked'));である必要があります。
yurin 2018年

90

デモ

使用する mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

チェックするとアラートが表示され、実際にはチェックできなくなります。これはChromeにあります。
pimvdb 2011

@pimvdmと同じです。確認は、チェックアクションでもポップアップします(チェック解除の場合にのみポップアップする必要があります)。[ok]を選択しても、ボックスはチェックされません。
Chaos教授

1
マウスを使用する場合は機能しますが、キーボードで確認する場合は機能しません。
frinux 2013

3
@frinuxそれはマウスに関連する質問だからです。 完全に別の問題との関連性に基づいて回答に反対票を投じないでください。キーボードでチェックボックスをオンにした後でインジケーターの状態をトリガーする際に問題が発生した場合は、不用意に回答を拒否するのではなく、質問について投稿してください。
ジョセフ・マリクル2013

3
ユーザーがチェックボックスを操作できるのはマウスダウンだけではないため、反対票が投じられました。
ジョナサン

51

を使用する場合、ほとんどの答えは(おそらく)キャッチしません<label for="cbId">cb name</label>。つまり、ラベルをクリックすると、チェックボックスを直接クリックするのではなく、チェックボックスがオンになります。(厳密には問題ではありませんが、さまざまな検索結果がここに来る傾向があります)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

その場合、以下を使用できます。

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

jQuery 1.6.4を使用したJSFiddleの例

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

最新のjQuery 2.xを使用したJSFiddleの例

  • jsfiddleの例と、クリック可能なチェックボックスのラベルが付いたhtmlを追加しました

1
.OuterDivOrBodyではなく#OuterDivOrBodyです:)
Laurent Brieu

24

まあ..頭痛を救うためだけに(ここでは真夜中過ぎ)、私は次のことを考え出すことができます:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

それが役に立てば幸い


11

私にとってこれはうまくいきます:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

4
これをウェブ検索で見つけた。'attr'の代わりに 'prop'を使用する必要があります>> api.jquery.com/prop
Dr

11

はい、どうぞ

HTML

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

6

changeイベントを取り除き、代わりにクリックイベントのテキストボックスの値を変更します。確認の結果を返すのではなく、varでキャッチします。trueの場合、値を変更します。次に、変数を返します。


6

チェックボックスをクリックして、同じイベントループ内の値をチェックすることが問題です。

これを試して:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

デモ:http : //jsfiddle.net/mrchief/JsUWv/6/


6

iCheck Jqueryを使用している場合は、以下のコードを使用します

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

5

これを試して

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

4
// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

4
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

4

遅い答えですが、使用することもできます on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>


1

単にクリックイベントを使用するだけです。私のチェックボックスIDはCheckAllです。

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

1

名前でラジオ値を取得する

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

1

なぜ誰もがこれをこんなに複雑にしているのかわかりません。これが私がしたすべてです。

if(!$(this).is(":checked")){ console.log("on"); }

-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
コードのみの回答は低品質と見なされます。コードの機能と問題の解決方法を必ず説明してください。投稿に情報を追加できれば、質問者と将来の読者の両方に役立ちます。完全にコードベースの回答を説明するも参照してください:meta.stackexchange.com/questions/114762/...
borchvm
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.