选择所有带文字链接的复选框

问题描述：

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

我想修改它，因此选择所有功能将工作过一个文本链接，象下面这样：

链接

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

我看了网上并不能找到一个解决方案，任何帮助将不胜感激，谢谢

答

更改复选框的链接并更换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); 
});

感谢迈克尔·米奥，它出色地工作，只是在事情上，现在它不会在检查和未检查之间切换，任何想法如何保持该功能？非常感谢 –

看到我更新的答案（未经测试）。 –

此外，只是一个普遍的说明，在jQuery 1.6+中，设置检查状态的正确方法是'.prop（'checked'，true）'而不是'.attr（'checked'，true）'。 –

答

你可以做这样的事情，

$('#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'); 
    } 
    }); 
});

非常感谢Jayantha，这真棒，我给出了第一个答案，因为他先回答我的原始问题（只是为了公平），但你实际上更多的是我想要的。欢呼 –

答

使用.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/

感谢3nigma，我以前没有使用道具，我检查了小提琴，它工作得很好，但它不起作用，当我将它添加到我的代码时，发现与我正在运行的其他东西发生冲突，我会坚持Jayantha解决方案。干杯 –

嗨，我刚刚看到道具只是从1.6增加，我跑1.5，这就是为什么它没有在我的网站上工作。欢呼 –

@Clinton Green对不起，我没有提到它... – Rafay

答

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

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

选择所有带文字链接的复选框

相关推荐