onay kutusu işaretliyse, bunu yapın

Bir onay kutusunu işaretlediğimde, onun dönmesini istiyorum <p> #0099ff .

Onay kutusunun işaretini kaldırdığımda, bunu geri almasını istiyorum.

Şu ana kadar sahip olduğum kod:

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

Ben ediyorum kullanmak .change() ve this.checked:

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

-

Kullanarak On this.checked
Andy E : büyük yazma-up biz jQuery eğilimi aşırı nasıl yapmış bir elementin erişim özelliklerine jQuery üstün gücünü kullanarak . Makale özellikle kullanımını davranır .attr("id")ama durumda #checkbox olan bir <input type="checkbox" />eleman sorunu için aynıdır $(...).attr('checked')(hatta $(...).is(':checked')) vs. this.checked.

Bunu dene.

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

Bazen jquery'yi aşırız. Düz javascript ile jquery kullanılarak birçok şey başarılabilir.

"This.checked" her zaman "açık" olabilir. Bu nedenle şunları tavsiye ederim:

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

farklı renkte bir sınıf tanımlarsanız, o zaman sınıfı değiştirirseniz

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

bu şekilde kodunuz daha temizdir çünkü tüm css özelliklerini belirtmek zorunda değilsiniz (diyelim ki bir kenarlık, bir metin stili veya başka bir şey eklemek istiyorsunuz ...)

Bu onay kutusu sorununu ele almak için çılgın bir çözüm buldum burada kontrol edilmemiş veya kontrol edilmemiş benim algoritmam ... global bir değişken oluşturalım var check_holder diyelim

check_holder'ın 3 durumu vardır

1. tanımlanmamış durum
2. 0 eyalet
3. 1 eyalet

Onay kutusu tıklanırsa,

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

Yukarıdaki kod, birçok durumda bir onay kutusunun işaretli olup olmadığını öğrenmek için kullanılabilir. Bunun arkasındaki konsept, onay kutusu durumlarını bir değişkene, yani açıkken, kapalıyken kaydetmektir. Umarım mantık sorununuzu çözmek için kullanılabilir.

Bu kodu kontrol edin:

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

Muhtemelen, onay kutusu işaretlendiğinde veya işaretlenmediğinde işlem yapmak için bu kodla gidebilirsiniz.

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

Yapardım :

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

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

Bakınız: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Optimal uygulama

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

gösteri

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

Neden yerleşik olayları kullanmıyorsunuz?

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