web-dev-qa-db-ja.com

チェックボックスがチェックされている場合、これを行います

チェックボックスをチェックしたら、<p>#0099ffを有効にします。

チェックボックスをオフにすると、元に戻します。

私がこれまでに持っているコード：

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
})
jquerycheckboxif-statementcheckedunchecked
123
android.nick

se.change()とthis.checked：

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

-

this.checkedの使い方
Andy E はjQueryを使い過ぎる傾向があることについて素晴らしい記事を書いています。 jQueryの強力な機能を利用して要素のプロパティにアクセスする 。この記事では特に.attr("id")の使用を扱いますが、#checkboxが<input type="checkbox" />要素の場合、問題は$(...).attr('checked')（または$(...).is(':checked')）とthis.checkedで同じです。

233
jensgram

これを試して。

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
})

時々私達はjqueryをやり過ぎます。プレーンJavaScriptとjqueryを使用して、多くのことを実現できます。

47
Chinmayee G

"this.checked"が常に "on"になっている可能性があります。したがって、私はお勧めします：

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
33
Benny Neugebauer

別の色でクラスを定義してからクラスを切り替えるとよいでしょう。

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
})

このように、すべてのcssプロパティを指定する必要はないので（境界線、テキストスタイル、その他を追加したいとしましょう）、クラスを切り替えるだけなので、コードはきれいになります。

21
fcalderan

チェックされていない、またはここでチェックされていないチェックボックスの問題に対処するためのクレイジーな解決策を見つけました。グローバル変数を作成すると、var check_holderとすることができます。

check_holderには3つの状態があります

  1. 未定義状態
  2. 状態
  3. 1状態

チェックボックスをクリックすると、

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

上記のコードは、チェックボックスがチェックされているかどうかを調べるためにさまざまな状況で使用できます。その背後にある概念は、チェックボックスの状態を変数に保存することです。つまり、オンのとき、オフのときです。私はあなたの問題を解決するためにその論理が使えることを願っています。

4
zedecliff

このコードを確認してください。

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>
3
Prabhjit Singh

私はします：

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

参照してください： https://www.w3schools.com/jsref/prop_checkbox_checked.asp

1
Jon Ryan

チェックボックスがチェックされている、またはチェックされていないときにこのコードを使ってアクションを実行することができます。

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
1
Sanjiv Malviya
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
1
Klaster_1

なぜ組み込みのイベントを使わないのですか？

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});
0
Paul 501

最適な実装

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

デモ

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>
0
John Slegers