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


414

Tôi có một chức năng dưới đây mà tôi muốn chỉ kích hoạt khi một hộp kiểm trong cùng tr được chọn. Xin vui lòng 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

Mã não

$(".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;
<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> 
  </tbody>
</table>

$('input.checkbox_check').checkedtrả lại truenếu được kiểm tra, falsenếu không
Don Cheadle

1
@mmcrae, điều đó không chính xác. Đối tượng jQuery không có thuộc tính checked. Tôi nghĩ ý của bạn là$('input.checkbox_check')[0].checked
Paul

Câu trả lời:


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

4
Trong CoffeeScript:if $('#my_checkbox').is ':checked'
Dennis

11
Mã xác nhận bởi jQuery doc, "cách qua trình duyệt tương thích để xác định xem một hộp kiểm được kiểm tra là để sử dụng tài sản: if ( elem.checked )hay if ( $( elem ).prop( "checked" ) )hay if ( $( elem ).is( ":checked" ) )". xem api.jquery.com/prop
Adrien Be

Nếu chúng ta sẽ nói về hiệu suất thì một số ý kiến ​​trong số này nên được thêm trực tiếp vào câu hỏi của bà Clinton và gợi ý rằng khuyến nghị nhanh nhất tuyệt đối sẽ là thêm ID
Tom Stickel

128

cho jQuery 1.6 trở lên:

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

cách tương thích với nhiều trình duyệt để xác định xem hộp kiểm có được chọn hay không là sử dụng thuộc tính https://api.jquery.com/prop/


8
Lưu ý rằng "Phương thức .prop () chỉ nhận giá trị thuộc tính cho phần tử đầu tiên trong tập hợp khớp." xem api.jquery.com/prop
Adrien Be

57

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

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

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


2
Thêm một cho việc đưa ra bước tiếp theo hợp lý.
Jason

22

Nếu không có giải pháp nào ở trên hoạt động vì bất kỳ lý do nào, như trường hợp của tôi, hãy thử điều này:

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

Giải pháp này hiệu quả với tôi
jking

8

Xem sự khác biệt chính giữa ATTR | ĐỀ NGHỊ | LÀ dưới đây:

Nguồn: 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>


7

Nếu được chọn :

$( "SELECTOR" ).attr( "checked" )  // Returns ‘true’ if present on the element, returns undefined if not present
$( "SELECTOR" ).prop( "checked" ) // Returns true if checked, false if unchecked.
$( "SELECTOR" ).is( ":checked" ) // Returns true if checked, false if unchecked.

Lấy giá trị kiểm tra :

$( "SELECTOR:checked" ).val()

Lấy số val đã kiểm tra :

$( "SELECTOR:checked" ).length

Đánh dấu hoặc bỏ chọn hộp kiểm

$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );

$( "SELECTOR:checked" ).val()bật value="on"cho bạn "bật" nếu được chọn và "" nếu không được chọn - hữu ích!
Fanky
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.