javascript - 如何使用 JavaScript 获取复选框附加文本？

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 的值code>,女性,男性和女性

我正在使用以下代码:

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

但我想获取文本。如何获取文本？

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