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>

$('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')) {

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.


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


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>

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>


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 );

$( "SELECTOR:checked" ).val()on value="on"gibt Ihnen "on", wenn aktiviert und "", wenn nicht aktiviert - nützlich!
Fanky
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.