nếu hộp kiểm được chọn, hãy làm điều này

Khi tôi chọn một hộp kiểm, tôi muốn nó biến <p> #0099ff .

Khi tôi bỏ chọn hộp kiểm, tôi muốn hoàn tác nó.

Mã tôi có cho đến nay:

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

Tôi sẽ sử dụng .change() và this.checked:

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

-

Khi sử dụng this.checked
Andy E đã thực hiện một bài viết tuyệt vời về cách chúng ta có xu hướng lạm dụng jQuery: Sử dụng sức mạnh tuyệt vời của jQuery để truy cập các thuộc tính của một phần tử . Bài viết đặc biệt xử lý việc sử dụng .attr("id")nhưng trong trường hợp #checkbox là một <input type="checkbox" />yếu tố thì vấn đề là giống nhau cho $(...).attr('checked')(hoặc thậm chí $(...).is(':checked')) so với this.checked.

Thử cái này.

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

Đôi khi chúng ta quá mức cần thiết jquery. Nhiều thứ có thể đạt được bằng cách sử dụng jquery với javascript đơn giản.

Nó có thể xảy ra rằng "this.checked" luôn luôn "bật". Do đó, tôi khuyên bạn nên:

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

Sẽ tốt hơn nếu bạn định nghĩa một lớp có màu khác, sau đó bạn chuyển lớp

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

theo cách này, mã của bạn sạch hơn vì bạn không phải chỉ định tất cả các thuộc tính css (giả sử bạn muốn thêm đường viền, kiểu văn bản hoặc khác ...) nhưng bạn chỉ cần chuyển một lớp

Tôi đã tìm ra một giải pháp điên rồ để xử lý vấn đề này của hộp kiểm không được kiểm tra hoặc kiểm tra ở đây là thuật toán của tôi ... tạo một biến toàn cục cho phép var check_holder

check_holder có 3 tiểu bang

1. trạng thái không xác định
2. 0 trạng thái
3. 1 bang

Nếu hộp kiểm được bấm,

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

Mã ở trên có thể được sử dụng trong nhiều tình huống để tìm hiểu xem hộp kiểm đã được kiểm tra hay chưa được kiểm tra. Khái niệm đằng sau nó là lưu các trạng thái hộp kiểm trong một biến, tức là khi nó bật, tắt. Tôi hy vọng logic có thể được sử dụng để giải quyết vấn đề của bạn.

Kiểm tra mã này:

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

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

Có lẽ bạn có thể đi với mã này để thực hiện các hành động khi hộp kiểm được chọn hoặc không được chọn.

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

Tôi sẽ làm :

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

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

Xem: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Thực hiện tối ưu

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

Bản giới thiệu

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

Tại sao không sử dụng được xây dựng trong các sự kiện?

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