jeśli pole wyboru jest zaznaczone, zrób to

Kiedy zaznaczam pole wyboru, chcę, aby się zmieniło <p> #0099ff.

Kiedy odznaczę pole wyboru, chcę, aby to cofnęło.

Kod jaki mam do tej pory:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 
Author: John Slegers, 2010-11-22

11 answers

Użyłbym .change() i this.checked:

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

--

Przy użyciu this.checked
Andy E zrobił świetny wpis o tym, jak mamy tendencję do nadużywania jQuery: wykorzystanie niesamowitej mocy jQuery, aby uzyskać dostęp do Właściwości elementu. Artykuł szczegółowo traktuje użycie .attr("id"), ale w przypadku, gdy #checkbox jest elementem <input type="checkbox" /> problem jest taki sam dla $(...).attr('checked') (lub nawet $(...).is(':checked')) vs. this.checked.

 230
Author: jensgram,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:02

Spróbuj tego.

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

Czasami przesadzamy z jquery. Wiele rzeczy można osiągnąć za pomocą jquery z prostym javascript.

 47
Author: Chinmayee G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-22 08:26:53

Może się zdarzyć, że " to.zaznaczone "jest zawsze "włączone". Dlatego polecam:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
 31
Author: Benny Neugebauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-03 20:05:30

Lepiej, jeśli zdefiniujesz klasę z innym kolorem, wtedy zmienisz klasę

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

W ten sposób Twój kod jest czystszy, ponieważ nie musisz określać wszystkich właściwości css(powiedzmy, że chcesz dodać obramowanie, styl tekstowy lub inny...) but you just switch a class

 21
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-22 09:03:12

Znalazłem szalone rozwiązanie dla radzenia sobie z tym problemem checkbox nie zaznaczone lub sprawdzone oto mój algorytm... Utwórz zmienną globalną powiedzmy var check_holder

Check_holder ma 3 Stany

  1. undefined state
  2. 0 Stan
  3. 1 Stan

Jeśli pole wyboru jest kliknięte,

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

Powyższy kod może być użyty w wielu sytuacjach, aby dowiedzieć się, czy pole wyboru zostało zaznaczone, czy nie sprawdzone. Koncepcją stojącą za tym jest zapisanie Stanów pola wyboru w zmiennej, tj. gdy jest on włączony,wyłączony. mam nadzieję, że logika rozwiąże twój problem.

 4
Author: zedecliff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-28 14:35:14

Sprawdź ten kod:

<!-- 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
Author: Prabhjit Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-24 14:36:18
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
 1
Author: Klaster_1,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-22 08:27:50

Prawdopodobnie możesz użyć tego kodu, aby podjąć działania, ponieważ pole wyboru jest zaznaczone lub niezaznaczone.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
 1
Author: Sanjiv Malviya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-03 13:37:49

Zrobiłbym:

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

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

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

 1
Author: Jon Ryan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-20 11:48:32

Optymalna realizacja

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

Demo

$('#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
Author: John Slegers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-03 13:51:32

Dlaczego nie użyć zdarzeń wbudowanych?

$('#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
Author: Paul 501,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-25 13:30:57