通过 Ajax 验证至少一个复选框在 django html 模板中被选中

Question

我在 Django 模板上显示分页网格，

{% for result in page.object_list %}
<tr>
<td style="border:0;border-bottom:1px solid #eeeeee;">
<input type="checkbox" id="{{result.object.user_id}}" name="selectedvalues[]" value="{{ result.object.user_id }}">
            </td>
<td>.....</td>
<tr>
{% endfor %}

最后有一个按钮可以删除用户。我想验证在按下删除按钮时它应该验证至少有一个用户通过复选框被选中。

$("#delete").click(function(){
    var $checkboxes $('# td input[type="checkbox"]');
    $('.checkbox input').each(function(index) {
        if($(this).is(':checked')) {
            break;
        } else {
            $(this).attr('value', 'False');
        }
      alert('You must select at lease one user');
    });

    });

但它不起作用.....

Answer 1

$("#delete").click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        alert("Checked");
    } else {
        alert("Not checked");
    }
});

如果您在页面上有其他复选框，则通过此 class:

在 JS 中将 class 添加到您的 <input> 和 select 项目

<input type="checkbox" class="deletechk" name="selectedvalues[]"
                                         value="{{ result.object.user_id }}">

并且在 Javascript 代码中：

if ($('.deletechk:checked').length > 0) {
    ...
}

Answer 2

您需要将 Javascript 更改为以下内容，而不是警报可以设置标志并通过在选中复选框时返回 false 来中断循环（参见 this Fiddle）：

$("#delete").click(function(){
    var checkboxes = $('input[type="checkbox"]');
    $(checkboxes).each(function(index) {
        if($(this).is(':checked')) {
            alert('checked');
        } else {            
            alert('You must select at lease one user');
        }      
    });
});

Answer 3

在HTML中添加：

<input type="checkbox" id="{{result.object.user_id}}"       
name="selectedvalues[]" value="{{ result.object.user_id }} class="mybox">

jquery:

$( "#delete" ).click(function(e) {
var checks=( $(".mybox").val());
if(!checks)
{
  alert('You must select at lease one user');
  e.PreventDefault()
{



});

通过 Ajax 验证至少一个复选框在 django html 模板中被选中

Validate at least One check box is checked in django html template via Ajax

javascript

django

ajax

jquery