Extrahieren des Werts des Kontrollkästchens, das dynamisch über den Kolben generiert wird

Gibt es eine Möglichkeit, eine HTML-Seite zu lesen und den Wert der dynamischen Kontrollkästchen zurückzugeben, auf die geklickt wird?Extrahieren des Werts des Kontrollkästchens, das dynamisch über den Kolben generiert wird

Jetzt weiß ich, wie man Werte aus statischen Kontrollkästchen auch ohne JS, aber da ich die unten Kontrollkästchen mit Daten aus der Datenbank generieren Ich bin nicht sicher, wie man jeden Punkt und weiß, welche der Benutzer überprüft ,

Als ich durch Entwickler-Tools in Chrom gegangen bin, kann ich sehen, dass der Wert der generierten Kontrollkästchen ändert, aber wenn ich auf sie verweisen, funktioniert es immer noch nicht.

<!DOCTYPE html> 
<html lang="en"> 

<form action="/test" method="post"> 
    <button type="submit" id="exporst-btn" class="btn btn-primary">Import Test Data <span class="glyphicon glyphicon-import"></span></button> 
    <br> 
    <br> 
    <div id="table"> 
     <table class="table table-condensed"> 
     <thead> 
      <tr> 
       <th>Selection</th> 
       <th>Slno</th> 
       <th>Region</th> 
      </tr> 
     </thead> 

    <tbody> 
    {% for obj in TD %} 
     <tr> 
      <td> 
       <input type="checkbox" name="chb[]" > {{obj.OEHR_Mtest_Slno}} 
       </td> 
      <td> 
       {{obj.OEHR_Mtest_Slno}} 
       </td> 
      <td> 
       {{obj.OEHR_Mtest_SF_Part_Number}} 
      </td> 

     </tr> 
    {% endfor %} 
    </tbody> 

</table> 
</div> 

    </div> 

     <!--<p id="export" name="test"></p>--> 
     <input type="hidden" id="exp" name="test"> 
<button type="submit" id="export-btn" class="btn btn-success">Execute <span class="glyphicon glyphicon-play"></span></button> 

</form> 


</body> 
<script type="text/javascript"><!-- 
    $('#export-btn').click(function() { 
     alert($('#mytable').find('input[type="checkbox"]:checked').length + '  checked'); 
    }); 
</script> 


</html>

ich die oben JS verwenden kann, zu wissen, wie viele Kontrollkästchen überprüft worden ist, mag ich den Wert von denen überprüft wissen, und ich bin nicht in der Lage, das zu bekommen.

Quelle

2017-07-18 Shobin Parameswaran

Was meinst du den Wert? Der Name? In welcher Reihe ist es? –

@ M.Davis Diese {{obj.OEHR_Mtest_Slno}} vom Server neben der Checkbox – Anarach

Rendert wahrscheinlich die Ausgabe – Anarach

Da Sie die Kontrollkästchen dynamisch generieren, ist es hilfreich, auch die Werte für die Kontrollkästchen dynamisch zu generieren. Auf diese Weise kann Flask, wenn Sie die Anfrage über die Schaltfläche zum Senden stellen, bestimmen, welche Kontrollkästchen durch Lesen der Werte überprüft wurden. Ich würde Ihre HTML ändern:

{% for obj in TD %} 
    <tr> 
     <td> 
      {# Assuming obj.OEHR_Mtest_Slno is a unique value #} 
      <input type="checkbox" name="chkbox" value="{{obj.OEHR_Mtest_Slno}}"> {{obj.OEHR_Mtest_Slno}} 
      </td> 
     <td> 
      {{obj.OEHR_Mtest_Slno}} 
      </td> 
     <td> 
      {{obj.OEHR_Mtest_SF_Part_Number}} 
     </td> 

    </tr> 
{% endfor %}

Dann in Ihrem Backend, können Sie die Werte über Zugang:

# Use .getlist if you are using HTML form elements with the same name 
chkbox_values = request.form.getlist('chkbox') # returns a list of values that were checked

Quelle

2017-07-18 12:46:13

Das hat tatsächlich funktioniert! Nette Idee, den {{DB value}} im checkbox-Wert einzuführen, ich habe mich gefragt, warum es nicht funktioniert hat, da es beim Rendern sequentiell seinen eigenen Wert generiert hat. Also habe ich versucht, das irgendwie zu bekommen, Smart move. –

Wenn ich mich nicht irre,

var foo = $('#mytable').find('input[type="checkbox"]:checked')

wird eine Rückkehr Array von HTML-Elementen, die Kontrollkästchen sind und aktiviert sind. Anschließend können Sie tun:

var bar = []; 
foo.each(function (index) { 
    var baz = this.parentNode.textContent || this.parentNode.innerText; 
    if (baz && baz.length > 0) 
     bar.push(baz); 
}); 
console.log(bar);

Das bar ein Array der Werte machen, die überprüft wurden. Es bekommt die Checkboxen, die überprüft wurden, findet ihre Eltern (<td> Tags) und bekommt den Text hinein (der die <input> Tags überspringt). Dies wird es Client-Seite tun.

Quelle

2017-07-18 12:54:53

Extrahieren des Werts des Kontrollkästchens, das dynamisch über den Kolben generiert wird

Antwort

Verwandte Themen