javascript - disabled - jQuery checkbox estado cambiado cambio de evento

jquery radio is checked

Question

Quiero que un evento dispare del 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. ¿Es este método de disparar en el clic y comprobar el estado correcto?

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

Answer 1

Toma de acción basada en un evento (en evento clic).

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

Sin evento tomando medidas basadas en el estado actual.

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

Answer 2

Enlazar al evento de change lugar de click . Sin embargo, es probable que 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 la vinculación al evento de change sobre el evento de click es que no todos los clics en una casilla de verificación harán que cambie de estado. Si solo desea capturar eventos que hacen que la casilla de verificación cambie de estado, desea que el evento de change tenga un nombre adecuado. Redactado en comentarios

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

Editar (ver comentarios)

Para obtener todas las casillas de verificación tiene un par de opciones. Puede utilizar el :checkbox pseudo-selector de :checkbox :

$(":checkbox")

O podrías usar un atributo igual al selector:

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

Answer 3

Para futuras referencias a cualquier persona que tenga dificultades, si está agregando dinámicamente las casillas de verificación, la respuesta correcta anterior no funcionará. Deberá aprovechar la delegación de eventos que permite que un nodo primario capture eventos burbujeados 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 el document para el selector principal. En su lugar, elija un nodo padre más específico para evitar que se propague el evento a demasiados niveles.

El siguiente ejemplo muestra cómo los eventos de los nodos dom agregados dinámicamente no activan escuchas previamente definidas.

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

Si bien 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 dichos 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>

Answer 4

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>

Answer 5

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" />`

Answer 6

Si su intención es adjuntar el evento solo en las casillas de verificación marcadas (por lo que se activará cuando no se verifiquen y verifiquen más tarde), esto es lo que desea.

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

    })
})

si su intención es adjuntar eventos a todas las casillas de verificación (marcadas y sin marcar)

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

    })
})

si desea que se dispare solo cuando se están verificando (sin marcar), @James Allardice responde arriba.

input[type=''checkbox'']:checked BTW input[type=''checkbox'']:checked es el selector CSS.

Answer 7

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
    }
})

Answer 8

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