/    Sign up×
Community /Pin to ProfileBookmark

Get the text of a checkbox input

Copy linkTweet thisAlerts:
Feb 06.2008

[CODE]
<form id=”myform”>
<input type=”checkbox” name=”M3 3″ />Hello 1
<br/>
<input type=”checkbox” name=”M4 3″/>Hello 2
<br/>
<input type=”checkbox” name=”M5 3″/>Hello 3
<br/>
<input type=”checkbox” name=”M6 3″/>Hello 4

</form>
[/CODE]

Say for example i have the following input checkboxes above. I want to loop through each of the input checkboxes and print out the text of each i.e. Hello1, Hello2 etc. I know how to create the loop but im trying to know what is the JS method to get the text, something like innerText i think?
for(each of the inputs)
{
document.write(input[i].innerText);
}

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERFeb 06.2008 — Try this ...
[code=php]
<form id="myform">
<input type="checkbox" id="Hello0" value="Hello 1" name="M3_3" />Hello 1 <br/>
<input type="checkbox" id="Hello1" value="Hello 2" name="M4_3"/>Hello 2 <br/>
<input type="checkbox" id="Hello2" value="Hello 3" name="M5_3"/>Hello 3 <br/>
<input type="checkbox" id="Hello3" value="Hello 4" name="M6_3"/>Hello 4
</form>
[/code]
Notes:

1. name="xx y" cannot have spaces in them, hence the change to "xx_y"

2. Easier to use the value parameter than trying to use the '.inner...' something.

3. You can put the results into a <textarea> by assignment or a <div> region using .innerHTML
[code=php]
function XferInfo() {
var str = '';
var IDS = '';
for (var i = 0; i<4; i++) {
IDS = 'Hello'+i;
if (document.getElementById(IDS).checked) {
str += document.getElementById(IDS).value+"n"; // or +'<br />' if inside HTML
}
alert(str); // for testing
return str;
}
[/code]
PS: Haven't checked code, but something like this should work. ?
Copy linkTweet thisAlerts:
@magentaplacentaFeb 06.2008 — You could add a label tag to those checkboxes.
Copy linkTweet thisAlerts:
@gil_davisFeb 06.2008 — The innerText property is IE only. You would do well to learn a W3C DOM compliant method. Besides, the text does not belong to the checkbox, but belongs to a textNode that is adjacent to the checkbox.

Also, your box names are not valid by W3C standards. Names cannot contain a space character.

Further, you cannot use document.write() after the page has finished loading because it will erase the document.
Copy linkTweet thisAlerts:
@magentaplacentaFeb 06.2008 — [CODE]<script type="text/javascript">
function getCheckboxText() {
var inputs = document.getElementsByTagName("input");
var checkboxText = []; //to hold our text

for (var i=0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
checkboxText.push(input.nextSibling.nodeValue);
}
}

var output = document.createElement("div");
output.style.border = "1px solid red";
output.style.padding = "10px";
var text = document.createTextNode(checkboxText.join(", "));
output.appendChild(text);
document.body.appendChild(output);
}
</script>

<input type="button" onclick="getCheckboxText();" value="get checkbox text"><p>

<form id="myform">
<input type="checkbox" name="M3 3"/>Hello 1<br/>
<input type="checkbox" name="M4 3"/>Hello 2<br/>
<input type="checkbox" name="M5 3"/>Hello 3<br/>
<input type="checkbox" name="M6 3"/>Hello 4
</form>[/CODE]
Copy linkTweet thisAlerts:
@sekterauthorFeb 06.2008 — I am aware of every mistake that i have made in the post i presented. The name was only a mistake when i copied/pasted and the document.write was just to get across the point :p, sry bowt that. I noticed in magentaplacenta's code the: [CODE]input.nextSibling.nodeValue[/CODE]. Is this what I can use to reference a checkboxes or radio buttons value?

The bigger picture of what im trying to do is make the value of the checkbox clickable [B]without[/B] doing it directly in html but via JS later on.

Cheers to all the replies btw.
Copy linkTweet thisAlerts:
@fpmarinFeb 06.2008 — Input=document.getElementById("myform");

Input=Input.getElementsByTagName("input");

var i=0;

while ( ( i<Input.length ) && ( !Input[i].checked ) ) ++i;



alert("Hello " + (++i));
×

Success!

Help @sekter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...