Question

使用以下代码创建动态checkboxes。

    var list = new Array();
    for(var i=0; i<data.length; i++)
    {
         $('#cContainer').append('<input type="checkbox" name="catChkBox" class="ckbox"
          id = "'+ data[i].id +'" value="'+ data[i].id + '" /> ' + data[i].name + '<br 
          />');
    }

上面的代码在document.ready函数内。我想收集检查值，即。在data[i].name之外的document.ready并将其放入列表中。

我尝试了以下仅显示id的代码。但我需要的是文本。这是data[i].name（我从dwr电话中得到这个）

function showSelectedValues()
{
  alert("--------------" + $("input[name=catChkBox]:checked").map(
     function () {return this.value;}).get().join(","));
}

我将从其他方法调用showSelectedValues()，我将使用这些值。对此有任何想法???

Answer 1

$("input[name=catChkBox]:checked").val();

Answer 2

为每个checkbox添加label

var list = new Array();
for(var i=0; i<data.length; i++)
{
     $('#cContainer').append('<input type="checkbox" name="catChkBox" class="ckbox"
      id = "'+ data[i].id +'" value="'+ data[i].id + '" /><label for="'+ data[i].id +'">' + data[i].name + '</label><br/>');
}

然后使用下面的代码获取与每个已检查checkbox

相关联的文字

$("input[name=catChkBox]:checked + label").text();

更新：

将值保存到数组中使用以下代码：

function ConvertSelectedValuesToList()
{
  list = $("input[name=catChkBox]:checked + label").map(function () {
      return $(this).text();
  }).get();
}

如果你想创建一个逗号分隔的值字符串，那么在join(",")之后添加get()。但是它不再是一个数组了。

Answer 3

data[i].name永远不会写入输入元素，因此不属于它。它只是元素之后的文本。

我建议添加一个包含您感兴趣的值的数据属性也，类似于：

var list = new Array();

for (var i = 0; i < data.length; i++) {
    $('#cContainer').append('<input type="checkbox" data-name="' + data[i].name + '" name="catChkBox" class="ckbox" id = "' + data[i].id + '" value="' + data[i].id + '" /> ' + data[i].name + '<br/>');
}

请注意上面的data-name="' + data[i].name + '"。

然后您可以更新您的方法以简单地查询数据属性，类似于：

function showSelectedValues() {
    alert("--------------" + $("input[name=catChkBox]:checked").map(function () {
        return $(this).data('name');
    }).get().join(","));
}

DEMO - 使用数据属性

在jquery中获取复选框的文本（不是值）

3 个答案: