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

126

Kiedy zaznaczam pole wyboru, chcę, żeby się włączyło <p> #0099ff.

Chcę, aby po odznaczeniu tego pola wyboru cofnęło to.

Kod, który mam do tej pory:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 
android.nick
źródło
1
„... kiedy nie jest zaznaczone, aby wyłączyć tę samą funkcję”. - funkcja przekazana .click()jest wywoływana w przypadku kliknięcia. Dlatego nie rozumiem, co masz na myśli mówiąc „włącz” i „wyłącz”. Jeśli pole wyboru jest zaznaczone, możesz wywołać funkcję a(). Ale musisz napisać funkcję reverse, która będzie wywoływana, gdy pole wyboru nie jest zaznaczone. Jestem zmieszany.
jensgram
Możesz oczywiście .bind()i .unbind()zdarzenia do innego elementu na podstawie stanu pola wyboru. Czy tego szukasz?
jensgram
1
Przepraszam za spamowanie, ale podałem przykład tego, o czym mówię.
jensgram
1
Wiem, że to stary post, ale teraz jQuery używa prop()tego, do czego chciał użyć tego pytania attr(); prop()metoda nie została utworzona wtedy. Odpowiedzi dotyczące this.checkedprawdopodobnie są jednak nadal przydatne.
trysis

Odpowiedzi:

235

Chciałbym używać .change() i this.checked:

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

-

O używaniu this.checked
Andy E napisał świetny opis tego, jak często nadużywamy jQuery: Wykorzystujemy niesamowitą moc jQuery do uzyskiwania dostępu do właściwości elementu . W artykule szczegółowo traktuje stosowanie .attr("id")ale w przypadku, gdy #checkbox jest<input type="checkbox" /> elementem kwestia jest taka sama $(...).attr('checked')(lub nawet $(...).is(':checked')) vs. this.checked.

jensgram
źródło
48

Spróbuj tego.

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

Czasami przesadzamy z jquery. Wiele rzeczy można osiągnąć używając jquery z prostym javascriptem.

Chinmayee G.
źródło
34

Może się zdarzyć, że opcja „this.checked” jest zawsze włączona. Dlatego polecam:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
Benny Neugebauer
źródło
W moim przypadku po prostu przesiadłem się $(':checkbox')na, żeby to działało;)
Pathros
21

lepiej jest zdefiniować klasę innym kolorem, a potem zmienić 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 tekstu lub inne ...), ale po prostu zmieniasz klasę


źródło
4
+1 za ogólne rozwiązanie. Nie ma jednak powodu, aby to robić $('#checkbox').attr('checked'), jeśli wiemy, że #checkbox jest to pole wyboru (jeśli nie, identyfikator jest raczej mylący). this.checkedzrobi.
jensgram
@jensgram @fcalderan +1 Dzięki za cynk! Nigdy nie widziałem toggleClass z przełącznikiem. Usuwam swój post, ponieważ jest bezużyteczny. Przepraszam, że jestem tak wybredny, ale myślę, że ta odpowiedź byłaby w 100% idealna bez dwukrotnego zaznaczenia '#checkbox': może zamiast tego użyć $ (this)? Albo rozwiązanie Jensgrama?
atak
@attack oczywiście możesz buforować swój element przed użyciem (zobacz kod teraz). this.checked jest nawet szybsze niż $ (..). attr ('check')
4

Znalazłem szalone rozwiązanie do radzenia sobie z tym problemem z zaznaczeniem pola wyboru lub zaznaczeniem tutaj to mój algorytm ... utwórz zmienną globalną, powiedzmy var check_holder

check_holder ma 3 stany

  1. stan nieokreślony
  2. 0 stan
  3. 1 stan

Jeśli pole wyboru jest zaznaczone,

$(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żna wykorzystać w wielu sytuacjach, aby dowiedzieć się, czy pole wyboru zostało zaznaczone, czy nie. Koncepcja, która się za tym kryje, polega na zapisaniu stanów pól wyboru w zmiennej, tj. Kiedy jest włączona, wyłączona. Mam nadzieję, że logikę można wykorzystać do rozwiązania problemu.

zedecliff
źródło
1
Rozwiązanie jest rzeczywiście szalone, ale nie w dobry sposób. Tak, zmienne globalne mogą pomóc w rozwiązaniu problemu dzisiaj, ale prawie na pewno jutro staną się dla Ciebie problemem. Staraj się ich unikać tam, gdzie to możliwe, czyli w 99% przypadków. Uniemożliwiają rozumowanie na temat kodu bez martwienia się o stan globalny. Jedna zmienna globalna może wyglądać niewinnie, ale szybko zmienia się w dziesiątki, a potem setki. Byłem tam, widziałem i to nie jest ładne.
bijancn
3

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>
Prabhjit Singh
źródło
1
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
Klaster_1
źródło
1

Prawdopodobnie możesz przejść z tym kodem, aby podjąć działania, gdy pole wyboru jest zaznaczone lub odznaczone.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
Sanjiv Malviya
źródło
0

Optymalna implementacja

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

Próbny

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

John Slegers
źródło
0

Dlaczego nie skorzystać z wbudowanych wydarzeń?

$('#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');
     }
});
Paweł 501
źródło