Question

我创建了一个带有“全选”复选框的表单，该复选框选中该表单中的所有其他复选框。

我想修改它，所以select all函数将在文本链接中起作用，如下所示：

链接

<a href="#' id="checkall">Select all checkboxes</a>

目前，它使用另一个复选框选择所有其他复选框

，如下所示

表格

<form action="#" method="post" id="myform">

<fieldset>
<div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div>

<div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div>

<div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div>

</fieldset>

</form>

脚本

<script type="text/javascript">
$(function () {
$('#checkall').click(function () {
    $('fieldset').find(':checkbox').attr('checked', this.checked);
});
});
</script>

我已经在线查找，无法找到解决方案，任何帮助将不胜感激，谢谢

Answer 1

你可以做这样的事情，

 $('#checkall').click(function () {
       var text=$(this).text(); 

       if (text=='Uncheck all'){
           $('fieldset').find(':checkbox').attr('checked', false);
           $(this).text('Check all');
        }else{
          $('fieldset').find(':checkbox').attr('checked', true);
          $(this).text('Uncheck all');
     }
    });
 });

Answer 2

将复选框更改为链接并将this.checked替换为true，如果您想要的是链接总是选中所有复选框。

<强>更新尝试添加data-checked="false"作为HTML中链接的属性。然后以下应该做的伎俩：

$('#checkall').click(function () {
    var checked = $(this).data('checked');
    $('fieldset').find(':checkbox').attr('checked', !checked);
    $(this).data('checked', !checked);
});

Answer 3

使用.prop（在jquery v-1.6和+中可用）你也有多个相同id的元素，这是不允许/应该完成的

$("#checkallll").click(function(){

       if ($("input[type='checkbox']").prop("checked"))
       {
           $(':checkbox').prop('checked', false);
           $(this).text('Check all');
        }
     else{
         $(':checkbox').prop('checked', true);
          $(this).text('Uncheck all');
     }        
 });

这里是小提琴http://jsfiddle.net/AKJwF/

Answer 4

这是我们最终做的事情，因为我们想要一个切换链接 - 根本不会弄乱数据属性。

click: function () {
    e.preventDefault();
    var $checked = $('input[name=select_attachment]:checked:visible');
    var $unchecked = $('input[name=select_attachment]:unchecked:visible');    
    $checked.prop('checked', false);
    $unchecked.prop('checked', true);
    return false;
}

选中带有文本链接的所有复选框

4 个答案: