Pregunta La casilla jQuery verificó el estado del evento cambiado


Quiero un evento para despedir al lado del cliente cuando una casilla de verificación está marcada / desmarcada:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Básicamente, quiero que suceda para cada casilla de verificación en la página. ¿Este método de encendido en el clic y el estado está bien?

Estoy pensando que debe haber una manera más limpia jQuery. Alguien sabe una solución?


506
2017-12-07 22:03


origen


Respuestas:


Enlace al change evento en lugar de click. Sin embargo, probablemente aún deba verificar si la casilla de verificación está marcada o no:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

El principal beneficio de vincular a la change evento sobre el click El evento es que no todos los clics en una casilla de verificación harán que cambie de estado. Si solo desea capturar eventos que provoquen que la casilla de verificación cambie de estado, querrá el nombre adecuado change evento.  Redactado en comentarios

También ten en cuenta que he usado this.checked en lugar de envolver el elemento en un objeto jQuery y usar métodos jQuery, simplemente porque es más corto y más rápido acceder a la propiedad del elemento DOM directamente.

Editar (ver comentarios)

Para obtener todas las casillas, tienes un par de opciones. Puedes usar el :checkbox pseudo-selector:

$(":checkbox")

O podrías usar un atributo igual selector:

$("input[type='checkbox']")

1002
2017-12-07 22:04



Para futuras referencias a cualquier persona que tenga dificultades, si agrega las casillas dinámicamente, la respuesta correcta anterior no funcionará. Tendrás que aprovechar delegación de eventos que permite que un nodo padre capture eventos borrosos de un descendiente específico y emita una devolución de llamada.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Tenga en cuenta que casi siempre es innecesario usar document para el selector de padres. En su lugar, elija un nodo primario más específico para evitar la propagación del evento en demasiados niveles.

El siguiente ejemplo muestra cómo los eventos de nodos domin dinámicamente agregados no activan oyentes definidos previamente.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Mientras que este ejemplo muestra el uso de la delegación de eventos para capturar eventos para un nodo específico (h1 en este caso) y emitir una devolución de llamada para tales eventos.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>


82
2017-08-17 22:41



Solo otra solución

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

18
2017-12-10 16:42



Si su intención es adjuntar el evento solo en casillas marcadas (para que se active cuando estén desmarcadas y verificadas más adelante), esto es lo que desea.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

si su intención es adjuntar evento a todas las casillas de verificación (marcadas y desmarcadas)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

si desea que se dispare solo cuando están siendo revisados ​​(sin marcar) entonces @James Allardice responde arriba.

Por cierto input[type='checkbox']:checked es selector de CSS


11
2018-05-19 08:33



$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

1
2017-10-04 07:49



quizás esta sea una alternativa para ti.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

0
2018-04-30 18:03



Toma de decisiones basada en un evento (en el evento click).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Sin acción de evento basado en el estado actual.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

0
2018-04-16 09:47



Prueba esta validación jQuery

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>


0
2018-05-17 06:09