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

Question

チェックボックスにチェックを入れたらオンにしたい <p> #0099ff.

チェックボックスをオフにすると、それを元に戻したいのです。

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

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

Answer 1

私は の.change()とthis.checkedを使用することになります：

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

-

this.checkedを使用しての

の の
偉大な書き込みアップ我々はjQueryのを酷使する傾向がどのようにを行っているのアンディE：<のhref = "のhttp： //web.archive.org/web/20140715065324/http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element」のrel = "noreferrer"> の要素のアクセスプロパティへのjQueryの素晴らしいパワーを利用のに。記事は、特に対.attr("id") #checkbox がの<input type="checkbox" />要素問題が$(...).attr('checked')（あるいは$(...).is(':checked')）についても同様であることがthis.checkedのが、ケースでの使用を扱います。

Answer 2

これを試してみてください。

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

時々、jQueryのやり過ぎ。多くの物事は、プレーンJavaScriptでjqueryのを使用して達成することができます。

Answer 3

常に「オン」である「this.checked」ことが起こり得ます。そのため、私はお勧めします：

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

Answer 4

それは良いでしょう、あなたが別の色を持つクラスを定義する場合、その後、あなたがクラスを切り替える

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

このようにあなたのコードそれのクリーナーあなたは（あなたはボーダー、テキストスタイルや他の...追加したいとしましょう）すべてのCSSプロパティを指定する必要はありませんが、あなただけ切り替えるため、クラス

Answer 5

ここでチェックされたりチェックされていないこのチェックボックスの問題に対処するためのクレイジーなソリューションが私のアルゴリズムです...たとえば、グローバル変数を作成します var check_holder

小切手所有者 3つの状態があります

1. 未定義の状態
2. 0状態
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
     }
});

上記のコードは、チェックボックスがチェックされているかどうかを確認するために多くの状況で使用できます。その背後にある概念は、チェックボックスの状態 (オン、オフなど) を変数に保存することです。このロジックを使用して問題を解決できることを願っています。

Answer 6

このコードをチェックしてください：          

<!-- 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>

Answer 7

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

Answer 8

おそらくあなたはチェックボックスがオンまたはオフされるよう行動を取るために、このコードで行くことができます。

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

Answer 9

私はどうなるます：

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

Answer 10

最適な実装

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

Answer 11

なぜ行事に組み込まれて使用しないで？

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