web-dev-qa-db-ja.com

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

$(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()が起動します。

これは物事を矛盾した状態にし、チェックボックスがチェックされるとテキストボックスは偽を言います。

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

javascriptjqueryevent-handling
494
Professor Chaos

私のものと一致する答えが見つからないので、これを投稿します。 JSFiddle でテストし、あなたが求めていることを行います。このアプローチには、チェックボックスに関連するラベルがクリックされたときに起動するという追加の利点があります。

元の答え： 

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

更新された答え： 

$(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);        
    });
});
800
kasdega

デモ

mousedownを使う

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

あなたが<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を追加しました
44
lko

まあ..頭痛（ここでは過去の真夜中）を保存するために、私は思いつくことができました：

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

それが役に立てば幸い

24
zarun

私にとってこれは素晴らしい作品です：

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

はい、どうぞ

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>
9
Developer

Changeイベントを取り除き、代わりにclickイベントのテキストボックスの値を変更します。確認の結果を返すのではなく、それをvarに入れます。もしそうであれば、値を変更してください。それからvarを返します。

6
yoozer8

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

これを試して：

$('#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
Mrchief

iCheck Jqueryを使用している場合は、以下のコードを使用してください。

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

これを試して

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });
5
ShankarSangoli
$(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'));
            }
        }
    });
});
5
Jason
$('#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
user3636759
// 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
Marcelo De Zen

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

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

単にクリックイベントを使う私のチェックボックスのIDはCheckAllです

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

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

             alert(";)");
      }
    }
1
Geeti

name でラジオの値を取得する

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

遅い回答ですが、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>
0
Pedro Lobito