0

我有一系列从 .csv 文件中读取时动态创建的复选框。在制作了一系列复选框后，添加了另一个复选框，即“全选”。这个想法是“全选”复选框，它也是动态创建的，当被选中时，将选中它上面的所有复选框。每个复选框都设置为将其名称属性放在下面的文本区域中。

这是从 csv 文件中提取HTML后的示例。

<div class="checkboxes">
   <input type="checkbox" class="article" name="Article 1" />Article 1 <br>
   <input type="checkbox" class="article" name="Article 2" />Article 2 <br>
   <input type="checkbox" class="select-all" name="select-all" />Select all
</div>
<textarea></textarea>

现在我在文章复选框上使用 .delegate 并全选来注册点击事件

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',function(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
 });

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
 });

问题是，即使“全选”确实检查了所有文章复选框，它实际上并没有触发该行：

    $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebrea

name 属性未放置在 textarea 中。

同样，所有文章复选框都被“全选”选中。它只是“触发”一个“点击”事件。

在 textarea 中，理想情况下会显示：

第1条

第二条

如何实现？

谢谢您的帮助。

解决：

  $('div.checkboxes').delegate('input.select-all','click',function(){

       if ($(this).is(':checked')){

      $('input.article[type=checkbox]').prop('checked',true);   
      $('input.article[type=checkbox]').each( function(){
        $(this).trigger('click');
      });
       }
  });

维伦丹克。

4

1 回答 1

0

做这些事情的方法有很多，但这里是对代码的简单更改：

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',addname);

function addname(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
};

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
     addname();
 });

注意 - 我注意到您似乎遗漏了很多;s，这是复制错字还是您在代码中遗漏了它们？

于 2013-03-16T15:15:56.203 回答