jQuery si la casilla de verificación está marcada
Tengo una función a continuación que quiero activar solo cuando tr
se marca una casilla de verificación en la misma.
$(".add_menu_item_table").live('click', function() {
if ($('input.checkbox_check').attr(':checked')); {
// I want this to trigger.
}
});
<table id="table-data">
<tbody>
<tr>
<td><input type="checkbox" class="checkbox_check"></td>
<td><input type="button" class="add_menu_item_table" value="Add"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox_check"></td>
<td><input type="button" class="add_menu_item_table" value="Add"></td>
</tr>
</tbody>
</table>
Expandir fragmento
Aceptado
if ($('input.checkbox_check').is(':checked')) {
para jQuery 1.6 o superior:
if ($('input.checkbox_check').prop('checked')) {
//blah blah
}
la forma compatible con varios navegadores para determinar si una casilla de verificación está marcada es usar la propiedad https://api.jquery.com/prop/
Para verificar si está marcado
$('#checkboxId').is(':checked')
Verificar
$("#checkboxId").prop('checked', true)
Para desmarcar
$("#checkboxId").prop('checked', false)
Si ninguna de las soluciones anteriores funciona por algún motivo, como mi caso, intente esto:
<script type="text/javascript">
$(function()
{
$('[name="my_checkbox"]').change(function()
{
if ($(this).is(':checked')) {
// Do something...
alert('You can rock now...');
};
});
});
</script>
Ver la principal diferencia entre ATTR | APOYO | Esta abajo:
Fuente: http://api.jquery.com/attr/
$( "input" )
.change(function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
})
.change();
p {
margin: 20px 0 0;
}
b {
color: blue;
}
<meta charset="utf-8">
<title>attr demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
</body>
</html>
Expandir fragmento