簡體   English   中英

django復選框,全選

[英]django checkbox select all

單擊標題復選框時,如何選擇所有復選框? 用javascript? 怎么樣? 我可以用更簡單的方法做到這一點嗎? 感謝:D

run.html

<form name="form" method="post" action="/home/{{build}}/">
<br>
<input type="submit" value="Delete" style="margin-left:149px; width:80px; height:30px">
<input type="hidden" name="build_id" value="{{build_id}}" />
<table border="1"; style="margin-left:150px; border-collapse:collapse;margin-top:10px"; cellpadding="4" borderColor=black>
<tr bgcolor=#888888>
<td><input type="checkbox" align="center"></td>
<td><b>Run</b></td>
<td><b>Product</b></td>
</tr>

{% for run in run_list %}
    <tr>
    <td><input type="checkbox" name="var_delete" value="{{run.id}}"></td>
    <td><a href="/home/{{build}}/{{run.name}}">{{build}} {{run.name}}</a></td>
    <td>{{run.build.version}}</td>
    </tr>
{% endfor %}
</table>
</form>

選中此復選框:如果您單擊項目復選框,您還可以切換主復選框的選擇:

$(function() {

  var masterCheckbox = $('#select_all');
  var slaveCheckboxes = $('.checkbox_delete');

  masterCheckbox.click(function() {
    slaveCheckboxes.attr('checked', masterCheckbox.attr('checked'));
  });

  slaveCheckboxes.click(function() {
      // Check all slave checkboxes selections: in case all are checked - check the master checkbox as well
      masterCheckbox.attr('checked', $.grep(slaveCheckboxes, function(e) {
          return $(e).attr('checked');
      }).length == slaveCheckboxes.length);
  });

});

除了Javascript,您別無選擇。 頁面加載后,django無法執行任何操作。 一種愚蠢的方法是將處理程序附加到主復選框,以重新加載頁面並設置它們由django選中,但這是一個非常非常糟糕的主意。

如果您使用的是諸如mootools或jquery之類的庫,則很容易實現。

第二個提示,看一下django表單 ,當處理表單附近的所有內容時,它們使您的生活更輕松。

您必須使用javascript。 這是一個使用jQuery的例子...

$(".checkbox_delete").attr('checked', true);

將其放在標題復選框的click事件中,然后將該類(checkbox_delete)添加到要選中的所有復選框中。

我使用jquery並編寫了此代碼,但是當我單擊“ select_all”時這沒用...

run.html

<script type="text/javascript" >
$(document).ready( function () {
  $('#select_all').click( function() {
    $(".checkbox_delete").attr('checked', true);
  });
}
</script>

<form name="form" method="post" action="/home/{{build}}/">
<br>
<input type="submit" value="Delete" style="margin-left:149px; width:80px; height:30px">
<input type="hidden" name="build_id" value="{{build_id}}" />
<table border="1"; style="margin-left:150px; border-collapse:collapse;margin-top:10px"; cellpadding="4" borderColor=black>
<tr bgcolor=#888888>
<td><input id="select_all" type="checkbox" align="center"></td>
<td><b>Run</b></td>
<td><b>Product</b></td>
</tr>

{% for run in run_list %}
    <tr>
    <td><input type="checkbox" name="var_delete" value="{{run.id}}" class="checkbox_delete"></td>
    <td><a href="/home/{{build}}/{{run.name}}">{{build}} {{run.name}}</a></td>
    <td>{{run.build.version}}</td>
    </tr>
{% endfor %}
</table>
</form>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM