jquery pull textarea值基于选中的复选框

时间:2013-11-19 14:44:08

标签: php jquery loops checkbox textarea

我正在开发一个项目,该项目涉及返回所选复选框的id以及相应textarea字段中的文本以获取所选复选框。数据是动态显示的,到目前为止我的jquery拉动了复选框和textareas工作:

    var noteList = $("textarea[name='revokeNotes']").map(function(){
            return this.value;
    }).get().join();
    var revokeList = $("input[name='revoke']:checked").map(function(){
            return this.id;
    }).get().join();

但是我要回到所有笔记字段,我不确定如何最好地迭代它们以找到正确的笔记,因为它们的ID不是顺序的,而是基于它们在表中的id被拉从。显示代码的最后一个版本如下:

<td><textarea name=\"revokeNotes\" id=\"".$v["id"]."\" cols=\"30\"rows=\"3\">".$v["notes"]."</textarea></td>
<td><input type=\"checkbox\" id=\"".$v["id"]."\" name=\"revoke\" value=\"".$v["id"]."\" /></td>

有没有办法从这个状态达到我的目标,或者我应该使用另一个jquery函数,类似于.map()?我想过使用复选框中的id字段来迭代所选的注释并将它们推入一个数组但是我不确定1)这是否有效以及2)如何做到这一点。

我需要以某种形式返回数据,无论是数组还是我可以在php中爆炸以创建数组,因为我在ajax中传递了一个值,因为没有设置的最大或最小行数将被显示每个用户。地图一直在工作,直到我向它扔了一些逗号。加分。

2 个答案:

答案 0 :(得分:1)

var noteList = $.map(
                 $("textarea[name='revokeNotes']").filter(function() {
                      return $(this).closest('td')
                                    .next('td')
                                    .find('input[type="checkbox"]')
                                    .is(':checked');
                  }), function(el) {
                          return el.value; 
               }).join();

答案 1 :(得分:1)

adeneo的答案很棒,我只是提出以下改进:

  • 如果可能的话,使用类选择器(如'.revoke-notes-area'),因为它们比DOM + attr选择器更快
  • 假设这是一个表,并且每行有一个textarea复选框组合,您可以遍历树到最近的<tr>一个解耦JS,因为复选框位于文本区域之后DOM。

    var filterMethod = function() {
      $(this).closest('tr').find('.revoke-checkbox').is(':checked');
    };
    var mapMethod = function(el) {
      return el.value;
    };
    
    var nodeList = $.map($('.revoke-notes-area').filter(filterMethod), mapMethod);
    

没有理由你不能或不应该将过滤器和地图方法内联,我只是把它们分成变量,这样就更容易阅读了。

您可以在此处查看我的codepen:http://codepen.io/aaron/pen/eIpby