jQuery wenn das Kontrollkästchen markiert ist

Question

jQuery wenn das Kontrollkästchen markiert ist

Gefragt el 31 de Oktober, 2011: Wann wurde die Frage gestellt
1268147 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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

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="stackoverflow.com/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td>
      <td width="20px"><a href="stackoverflow.com/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>

Gefragt el 31 de Oktober, 2011 von Clinton Green

Answer 1

5 Antworten

Answer 2

10voto

Guihgo Punkte 592

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>

Beantwortet el 24 de Dezember, 2016 von Guihgo (592 Punkte )

Answer 3

9voto

Gass Punkte 3731

Sie können die .is(':checked') Methode, die Folgendes zurückgibt wahr wenn ein Element geprüft wird, andernfalls gibt es falsch .

Arbeitsbeispiel

$('input').on('click', function(){
  isChecked = $(this).is(':checked')

  if(isChecked){ 
    $('html').css('background-color','green')
  }
  else{ 
    $('html').removeAttr('style')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox"> Try me </label>

Beantwortet el 21 de August, 2021 von Gass (3731 Punkte )

Answer 4

1voto

amota Punkte 111

Neu in jQuery/Javascript und versuchte die oben genannten Lösungen. Schließlich ist dies, was für mich gearbeitet, um:

die Elemente beim Laden der Seite ausgeblendet bleiben (da die Kontrollkästchen standardmäßig deaktiviert sind), und dann
Elemente ein-/ausblenden lassen, je nachdem, ob das Kontrollkästchen markiert ist oder nicht.

Es ist wahrscheinlich ein wenig hässlich/redundant/fremde Syntax-weise, aber es funktioniert für jetzt!

Hinweis: Dies alles gehört in den folgenden Abschnitt <script> Tag, direkt vor dem </body> Tag auf Ihrer HTML-Seite:

<script type="text/javascript">
   // 'solution code' goes here...
</script>

Lösungscode':

    $(document).ready(function(){

          // HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
          if ($([id="show_box"]).is(':checked') == false)
                $("#hiddenDiv").hide();

          // SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
          $('[id="show_box"]').change(function()
          {
            if ($(this).is(':checked'))
                $("#hiddenDiv").fadeIn();
            else
                $("#hiddenDiv").fadeOut();
          });

    });

[id="show_box"] (das Kontrollkästchen mit der ID 'show_box')
#hiddenDiv (die ID des Elements, das ich aus-/einblenden möchte)
ce (da es verschachtelt ist, steht es am Ende für 'show_box')

Und hier ist der HTML-Code auf der Seite, auf den sich der "Lösungscode" bezieht:

<!-- CHECKBOX -->
<input type="checkbox" id="show_box" name="box" value="">

<!-- ELEMENT THAT SHOWS/HIDES -->
<div id="hiddenDiv"></div>

Beantwortet el 21 de Juni, 2021 von amota (111 Punkte )

Answer 5

0voto

fatemeh sadeghi Punkte 835

Um die Eingabe zu prüfen und durch ein Kontrollkästchen zu bestätigen, verwenden Sie dieses Skript...

 $(document).on("change", ".inputClass", function () {
    if($(this).is(':checked')){
     confirm_message = $(this).data('confirm');
       var confirm_status = confirm(confirm_message);
                        if (confirm_status == true) {
                           //doing somethings...
                         }
                   }});  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> check action </lable>
<input class="inputClass" type="checkbox" data-confirm="are u sure to do ...?" >

Beantwortet el 14 de Oktober, 2020 von fatemeh sadeghi (835 Punkte )

Answer 6

0voto

Meloman Punkte 3120

Ich brauchte diese Eigenschaft, um automatisch "Unterkontrollkästchen" zu aktivieren/deaktivieren, und das funktioniert:

jQuery('.checkbox-parent').click(function(){
    jQuery('.checkbox-child').prop(
        'checked', 
        jQuery('.checkbox-parent').prop('checked')
    ); 
});

Beantwortet el 21 de Marsch, 2022 von Meloman (3120 Punkte )

jQuery wenn das Kontrollkästchen markiert ist

Antworten

Arbeitsbeispiel

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

jQuery wenn das Kontrollkästchen markiert ist

Antworten

Arbeitsbeispiel

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: