jQuery nếu hộp kiểm được chọn

Question

Tôi có một chức năng bên dưới mà tôi muốn chỉ kích hoạt khi hộp kiểm trong cùng một tr được chọn. Hãy cho tôi biết những gì tôi đang làm sai, các phương pháp thông thường không hoạt động. Cảm ơn

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> 

Answer 1

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

Answer 2

cho jQuery 1.6 trở lên:

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

cách qua trình duyệt tương thích để xác định nếu chọn hộp kiểm là sử dụng tài sản https://api.jquery.com/prop/

Answer 3

này $('#checkboxId').is(':checked') cho xác minh nếu được kiểm tra

& này $("#checkboxId").prop('checked', true) để kiểm tra

& này $("#checkboxId").prop('checked', false) để bỏ chọn

Answer 4

Xem khác biệt chính ence giữa ATTR | PROP | LÀ dưới đây:

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>

Answer 5

Nếu không ai trong số các giải pháp trên làm việc cho bất cứ lý do, giống như trường hợp của tôi, hãy thử này:

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