How to get checkbox append text using 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>

There are 3 check-boxes now I want to both value 1,2,3 and the text Male,Female,Male and Female

I am using below 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());
});

But i want to get the text. How to get the text?

Could you consider wrapping the checkbox and the text in a <label>? — Maurice Perry
– Maurice Perry, Commented May 9, 2014 at 12:44
You'd be a lot better off adding a data-attribute or a label to the input because that text node is 'naked' — Jay Blanchard
– Jay Blanchard, Commented May 9, 2014 at 12:45
@Maurice Perry No when i am using <label> these 3 text are disabled — Developer
– Developer, Commented May 9, 2014 at 12:45
@learnphp: "No when i am using <label> these 3 text are disabled" That makes no sense. Putting them in a label does nothing to disable (or enable) them. — T.J. Crowder
– T.J. Crowder, Commented May 9, 2014 at 12:46
@learnphp: Your edit just now completely changes the question, invalidating the previously-correct answer. I'm afraid that's just not cool. If you're going to completely change the basis of the question, make it a new question. — T.J. Crowder
– T.J. Crowder, Commented May 9, 2014 at 12:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can update to this with .nextSibling.nodeValue to push in your tt array:

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

If there's any possibility your checkboxes may not be followed by the text, you might make that tt.push more defensive:

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

Demo

As per your new edits you can change to this:

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

Yup. nodeValue is what I thought too. And closing the tag is not really required.

Manno · Accepted Answer · 2014-05-09 13:05:42Z

EDIT - I began typing my answer before OP updated the question with <label> tags...

The text associated with each checkbox input should usually be encased in a <label> element, in either of the following ways. This also has the added benefit of allowing the checkbox to be checked/unchecked when clicking the label as well as the checkbox:

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

which can be targeted in jQuery like this:

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

or alternatively:

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

which can be targeted in jQuery like this:

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

That second example will include the markup of the checkbox. Really not what one wants...
You are right, I'll update my answer to .text() rather than .html().

Collectives™ on Stack Overflow

How to get checkbox append text using JavaScript?

2 Answers 2

Demo

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related