jQuery, wenn das Kontrollkästchen aktiviert ist

414

Ich habe eine Funktion darunter, die ich nur auslösen möchte, wenn ein Kontrollkästchen in derselben tr aktiviert ist. Bitte sagen Sie mir, was ich falsch mache, die üblichen Methoden funktionieren nicht. Vielen Dank

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>
Clinton Green
quelle
$('input.checkbox_check').checkedkehrt zurück, truewenn es markiert ist, falsesonst
Don Cheadle
1
@mmcrae, das ist falsch. Das jQuery-Objekt hat keine Eigenschaft checked. Ich denke du meintest$('input.checkbox_check')[0].checked
Paul

Antworten:

1047
if ($('input.checkbox_check').is(':checked')) {
SLaks
quelle
4
In CoffeeScript:if $('#my_checkbox').is ':checked'
Dennis
11
Von jQuery doc bestätigter Code: "Die browserübergreifende Methode, um festzustellen, ob ein Kontrollkästchen aktiviert ist, besteht darin, die Eigenschaft: if ( elem.checked )oder if ( $( elem ).prop( "checked" ) )oder zu verwenden. if ( $( elem ).is( ":checked" ) )" siehe api.jquery.com/prop
Adrien Be
Wenn wir über Leistung sprechen wollen, sollten einige dieser Kommentare direkt zu der von Clinton gestellten Frage hinzugefügt werden und vorschlagen, dass die absolut schnellste Empfehlung darin besteht, eine ID hinzuzufügen
Tom Stickel
128

für jQuery 1.6 oder höher:

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

Die browserübergreifende Methode, um festzustellen, ob ein Kontrollkästchen aktiviert ist, besteht darin, die Eigenschaft https://api.jquery.com/prop/ zu verwenden.

Alex
quelle
8
Beachten Sie, dass "Die .prop () -Methode den Eigenschaftswert nur für das erste Element in der übereinstimmenden Menge abruft." siehe api.jquery.com/prop
Adrien Be
56

Dies $('#checkboxId').is(':checked')zur Überprüfung, ob aktiviert ist

& dies $("#checkboxId").prop('checked', true) zu überprüfen

& dies $("#checkboxId").prop('checked', false)zu deaktivieren

DA001
quelle
2
Plus eins für den logischen nächsten Schritt.
Jason
22

Wenn keine der oben genannten Lösungen aus irgendeinem Grund funktioniert, wie in meinem Fall, versuchen Sie Folgendes:

  <script type="text/javascript">
    $(function()
    {
      $('[name="my_checkbox"]').change(function()
      {
        if ($(this).is(':checked')) {
           // Do something...
           alert('You can rock now...');
        };
      });
    });
  </script>
Waiyl Karim
quelle
Diese Lösung funktioniert für mich
jking
8

Siehe Hauptunterschied zwischen ATTR | PROP | IS unten:

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

Guihgo
quelle
7

Wenn aktiviert :

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

Holen Sie sich den geprüften Wert:

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

Holen Sie sich die überprüften Wertnummern:

$( "SELECTOR:checked" ).length

Aktivieren oder deaktivieren Sie das Kontrollkästchen

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

quelle
$( "SELECTOR:checked" ).val()on value="on"gibt Ihnen "on", wenn aktiviert und "", wenn nicht aktiviert - nützlich!
Fanky