jQuery jika kotak centang dicentang


415

Saya memiliki fungsi di bawah ini yang hanya ingin saya picu ketika kotak centang di tr yang sama dicentang. Tolong beritahu saya apa yang saya lakukan salah, metode yang biasa tidak berfungsi. Terima kasih

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;
<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').checkedkembali truejika sudah dicentang, falsesebaliknya
Don Cheadle

1
@mmcrae, itu tidak benar. Objek jQuery tidak memiliki properti checked. Saya pikir yang Anda maksud$('input.checkbox_check')[0].checked
Paul

Jawaban:


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

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

11
Kode dikonfirmasi oleh jQuery doc, "cara yang kompatibel dengan browser-silang untuk menentukan apakah kotak centang dicentang menggunakan properti: if ( elem.checked )atau if ( $( elem ).prop( "checked" ) )atau if ( $( elem ).is( ":checked" ) )". lihat api.jquery.com/prop
Adrien Be

Jika kita akan berbicara tentang kinerja maka beberapa dari komentar ini harus ditambahkan langsung ke pertanyaan yang diajukan oleh Clinton, dan menyarankan bahwa rekomendasi tercepat mutlak adalah menambahkan ID
Tom Stickel

129

untuk jQuery 1.6 atau lebih tinggi:

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

cara yang kompatibel lintas-browser untuk menentukan apakah kotak centang dicentang adalah dengan menggunakan properti https://api.jquery.com/prop/


8
Perhatikan bahwa "Metode .prop () mendapatkan nilai properti hanya untuk elemen pertama di set yang cocok." lihat api.jquery.com/prop
Adrien Be

57

ini $('#checkboxId').is(':checked')untuk memverifikasi jika dicentang

& ini $("#checkboxId").prop('checked', true) untuk memeriksa

& ini $("#checkboxId").prop('checked', false)untuk menghapus centang


2
Plus satu untuk memberikan langkah logis berikutnya.
Jason

24

Jika tidak ada solusi di atas yang berfungsi karena alasan apa pun, seperti kasus saya, coba ini:

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

Solusi ini berfungsi untuk saya
jking

8

Lihat perbedaan utama antara ATTR | PROP | IS di bawah ini:

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

Jika dicentang :

$( "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.

Dapatkan val yang diperiksa :

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

Dapatkan nomor val yang diperiksa :

$( "SELECTOR:checked" ).length

Centang atau hapus centang pada kotak centang

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

$( "SELECTOR:checked" ).val()pada value="on"memberi Anda "pada" jika dicentang dan "" jika tidak dicentang - berguna!
Fanky
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.