通過瓶子動態生成複選框的提取值

有沒有辦法讀取HTML頁面並返回被點擊的動態複選框的值？通過瓶子動態生成複選框的提取值

現在，我知道如何從靜態複選框中獲取值，即使不使用JS，但由於我使用數據庫中的數據生成下面的複選框，我不知道如何針對每個複選框並知道用戶檢查了哪一個，

當我瀏覽Chrome中的開發人員工具時，可以看到生成的複選框的值發生了變化，但是當我引用它們時，它仍然不起作用。

<!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>

我可以用上面的JS知道有多少複選框被選中，我想知道的那些檢查的價值，我沒能拿到。

來源

2017-07-18 Shobin Parameswaran

你是什麼意思的價值？名字？它在哪一行？ –

@ M.Davis這一個{{obj.OEHR_Mtest_Slno}}複選框旁邊的服務器 – Anarach

可能呈現輸出 – Anarach

因爲您正在動態生成複選框，所以還可以動態生成複選框的值。這樣，當您通過提交按鈕請求POST時，Flask可以通過讀取值來確定檢查了哪些複選框。我會改變你的HTML：

# 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

來源

2017-07-18 12:46:13

這實際上工作！在複選框值中引入{{DB值}}的好主意，我想知道爲什麼它不能正常工作，因爲它在渲染時依次產生了自己的值，所以我試圖以某種方式獲得這個智能移動。 –

如果我沒有記錯，

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

將返回：

{% 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 %}

然後在你的後臺，你可以通過訪問值複選框的html元素數組，並進行檢查。然後，你可以這樣做：

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

這將使bar這是檢查值的數組。它會得到已檢查的複選框，找到他們的父母（<td>標籤），並獲取文本（跳過<input>標籤）。這將做到客戶端。

來源

2017-07-18 12:54:53

通過瓶子動態生成複選框的提取值

回答

相關問題