Question

<label>
   <input type="checkbox" name="data[User][gender][]" id="UserGender1" value="1">Male
</label>
<label>
   <input type="checkbox" name="data[User][gender][]" id="UserGender2" value="2">Female
</label>
<label>
   <input type="checkbox" name="data[User][gender][]" id="UserGender3" value="3">Male and Female
</label>

现在有3个复选框我想同时评估1，2，3和文字Male，Female，{{1 }}

我正在使用以下代码：

Male and Female

但我想得到文字。如何获取文本？

Answer 1

您可以使用.nextSibling.nodeValue更新为此内容以推送tt数组：

var con = "input[name='data[User][gender][]']:checked";
var tt = new Array(),
    values = [];
$.each($(con), function () {
    values.push($(this).val());
    tt.push(this.nextSibling.nodeValue);
});
console.log(tt);

如果您的复选框可能无法跟随文字，则可能会使tt.push更具防御性：

tt.push(this.nextSibling ? this.nextSibling.nodeValue : "(missing text)");

Demo

根据您的新修改，您可以更改为：

var con = "input[name='data[User][gender][]']:checked";
var tt = new Array(),
    values = [];
$.each($(con), function () {
    values.push($(this).val());
    tt.push($(this).closest('label').text());  //<----change this
});
console.log(tt);

Answer 2

编辑 - 我在OP用<label>标签更新问题之前开始输入我的答案......

与每个复选框输入相关联的文本通常应以下列任一方式包含在<label>元素中。这还有一个额外的好处，即允许在单击标签和复选框时选中/取消选中复选框：

<input type="checkbox" name="data[User][gender][]" id="UserGender1" value="1">
<label for="UserGender1">Male</label>

可以像这样在jQuery中定位：

var con = "input[name='data[User][gender][]']:checked";   
var values = new Array();
var tt = new Array();
$.each($(con), function() {
    values.push($(this).val());
    tt.push($("label[for='" + $(this).attr('id') + "']").html();
});

或者：

<label for="UserGender1"><input type="checkbox" name="data[User][gender][]" id="UserGender1" value="1">Male</label>

可以像这样在jQuery中定位：

var con = "input[name='data[User][gender][]']:checked";   
var values = new Array();
var tt = new Array();
$.each($(con), function() {
    values.push($(this).val());
    tt.push($(this).parent().text());
});

如何使用JavaScript附加复选框附加文本？

2 个答案:

Demo