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

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
Andy Eの使用について、私たちが 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

別の色でクラスを定義してから、クラスを切り替える方が良い

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

この方法では、すべての css プロパティを指定する必要がないため (境界線、テキスト スタイルなどを追加したいとしましょう...)、コードはよりクリーンになりますが、クラスを切り替えるだけです。

Answer 4

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

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 5

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

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

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

Answer 7

最適な実装

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