选择所有带有文本链接的复选框 [英] Select all checkboxes with a text link

问题描述

我制作了一个带有全选复选框的表单，用于选择该表单中的所有其他复选框。

我想修改它以便全选功能将在文本链接中起作用，如下所示：

链接

 < a href =＃'id =checkall>选择所有复选框< / a> 
  

目前它的工作方式如下，使用另一个复选框来选择所有其他复选框。

表格

 < form action =＃method =postid =myform> 
 
< ; fieldset> 
< div class =radio>< input type =checkboxname =checkallid =checkall>< label for =checkall>检查所有< / label>< / div> 
 
< div class =radio>< input type =checkboxname =checkbox1id =checkbox1>< label for =checkbox1>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =check box2id =checkbox2> < label for =checkbox2>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox3id =checkbox3> < label for =checkbox3>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox4id =checkbox4> < label for =checkbox4>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox5id =checkbox5> < label for =checkbox5>复选框< / label>< / div> 
 
< div class =radio>< input type =checkboxname =checkbox6id =checkbox6> < label for =checkbox6>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox7id =checkbox7> < label for =checkbox7>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox8id =checkbox8> < label for =checkbox8>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox9id =checkbox9> < label for =checkbox9>复选框< / label>< / div> 
< div class =radio>< input type =checkboxname =checkbox10id =checkbox10> < label for =checkbox10>复选框< / label>< / div> 
 
< / fieldset> 
 
< / form> 
  

脚本

 < script type =text / javascript> 
 $（function（）{
 $（'＃checkall'）。click（function（）{
 $（'fieldset'）。find（'：checkbox'）。attr（'已检查'，this.checked）; 
}）; 
}）; 
< / script> 
  

我在网上查找并找不到解决方案，任何帮助都将不胜感激，谢谢

解决方案

将复选框更改为链接并替换 this.checked ，其中 true 如果您希望链接始终选中所有复选框。

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

$ $ p $ $'$ check $'。click（function（）{
var checked = $（this）.data（'checked'）;
$（'fieldset'）。find（'：checkbox'）。attr（'checked'，！checked）;
$（这个）.data（'checked'，！checked）;
}）;

I have made a form with a "Select All" checkbox that selects all the other checkboxes within that that form.

I want to modify it so the select all function will work off of a text link, like below:

Link

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

Currently it works as below using another checkbox to select all the other checkboxes

Form

<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

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

I've looked online and can't find a solution for this, any help will be greatly appreciated, thanks

解决方案

Change the checkbox to a link and replace this.checked, with true if all you want is for the link to always select all checkboxes.

Update Try adding data-checked="false" as an attribute of the link in the HTML. Then the following should do the trick:

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

这篇关于选择所有带有文本链接的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！