2011-10-31 28 views
267

Tengo una función más adelante que yo quiero para activarse únicamente cuando se marca una casilla de verificación en la misma tr. Dígame qué estoy haciendo mal, los métodos habituales no funcionan. GraciasjQuery si casilla de verificación está marcada

JS

$(".add_menu_item_table").live('click', function() { 
var value_td = $(this).parents('tr').find('td.td_name').text(); 
if ($('input.checkbox_check').attr(':checked')); { 
    var newDiv = $('<div class="div_menu_button"></div>'); 
    var showDiv = $('<div id="show'+ "0" + numShow++ +'" class="menu_button_info hidden"></div>'); 
    var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" data-target="#show'+ "0" + numTarget++ +'" class="toggle_trigger actions">&nbsp;</a><div style="padding:5px"></div>'); 
    var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>'); 
    $('#created_buttons_list').append(
     newDiv.text(value_td)); 
     newDiv.wrap("<li></li>"); 
     newDiv.append(toggleTrigger); 
     newDiv.append(showDiv); 
     showDiv.append(menuForm); 
     menuForm.html('<label for="navigation_label">Navigation Label</label><input id="navigation_label'+ "0" + numLabelone++ +'" type="text" placeholder="Navigation Label" name="navigation_label"><label for="attribute">Attribute</label><input id="attribute'+ "0" + numLabeltwo++ +'" type="text" type="text" placeholder="Attribute" name="attribute"><label for="url">URL</label><input id="url'+ "0" + numLabelthree++ +'" type="text" type="text" placeholder="URL" name="url"><input type="button" value="Remove" class="button_link remove_button"> <input type="reset" value="Cancel" class="button_link">'); 
} 
}); 

var numToggle = 0; 
var numShow = 0; 
var numTarget = 0; 
var numForm = 0; 
var numLabelone = 0; 
var numLabeltwo = 0; 
var numLabelthree = 0; 

HTML

<table width="316px" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
        <tbody> 
        <tr> 
        <td width="20px"><input type="checkbox" style="width:20px;" value="1" name="checkbox"></td> 
        <td width="200px"><a href="/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td> 
        <td width="20px"><a href="/admin/feedbackmanager/sortby/3/sortdesc/0">Add</a></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Timeplot</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Operations Manuals</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Company Structure</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">CMS Report</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Test Document</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Test CMS page</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        </tbody> 
        </table> 
+0

'$ ('input.checkbox_check'). checked' vuelve 'true' si está marcada, de lo contrario' false' – mmcrae

+1

@mmcrae, eso es incorrecto. El objeto jQuery no tiene la propiedad 'checked'. Creo que quería decir '$ ('input.checkbox_check') [0] .checked' – Paul

Respuesta

703
if ($('input.checkbox_check').is(':checked')) { 
+1

Quiere' $ (this) .closest ('tr') encuentra ' – SLaks

+1

En CoffeeScript. ('Checkbox_check.'):' Si $ ('#my_checkbox') es ':. checked'' – Dennis

+6

Código confirmada por jQuery documento, "la forma multi-navegador compatible para determinar si una casilla de verificación está marcada es el uso de la propiedad:' Si (elem.checked) 'o 'if ($ (elem) .prop ("controlada"))' ', o si ($ (elem) .is (": comprueba"))'". ver http://api.jquery.com/prop/ –

90

para jQuery 1.6 o superior:

if ($('input.checkbox_check').prop('checked')) { 
    //blah blah 
} 

la forma multi-navegador compatible para determinar si se marca una casilla de verificación es el uso de la propiedad https://api.jquery.com/prop/

+6

Tenga en cuenta que "El método .prop() obtiene el valor de la propiedad solo para el primer elemento del conjunto coincidente." ver http://api.jquery.com/prop/ –

13

este $('#checkboxId').is(':checked') para verificar si se comprueba

& este $("#checkboxId").prop('checked', true) para comprobar

& este $("#checkboxId").prop('checked', false) desmarcar

4

Ver principal diferir entre ATTR | PROP | ES a continuación:

Source: 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>

4

Si ninguna de las soluciones anteriores funciona por alguna razón, como mi caso, intente lo siguiente:

<script type="text/javascript"> 
    $(function() 
    { 
     $('[name="my_checkbox"]').change(function() 
     { 
     if ($(this).is(':checked')) { 
      // Do something... 
      alert('You can rock now...'); 
     }; 
     }); 
    }); 
    </script> 
Cuestiones relacionadas