How can I check a radio button with no id using a single line of javascript (no jQuery)?

Question

All right, this is a pretty specific question from a beginner, so bear with me.

I'm a newbie just learning the ropes. Here's the background (skip to next para if you don't care): I'm updating my first android app and I'm using MIT App Inventor 2 to do it. It's a free tool online that uses a WYSIWYG screen editor and Blockly to create behaviors, interactions, etc. The app I'm making loads a specific web page with a form and fills out most of the form for you (specifically, it's to help people enter the online ticket lottery for a theater show). The page is not my own so I can't edit the HTML. But I can run javascript on top of it by plugging single lines of javascript code into the Blockly side of App Inventor. Here's a relevant example of how it looks.

I've figured out how to fill in most of the form using getElementByID(). But there's a set of radio buttons that have no id. Here's a lightly modified version of the HTML (which I cannot edit):

<div id="cont_id_tickets">
    <div>
        <input type="radio" name="tickets" value="1" />
        <span style="font-family:Times New Roman; font-size:15px;">1</span>
    </div>
    <div>
        <input type="radio" name="tickets" value="2" />
        <span style="font-family:Times New Roman; font-size:15px;">2</span>
    </div>
    <div id="required_info_tickets" class="requiredInfo floatLeft">
    </div>
    <input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value."
        patternID="0" customRegex="" />
</div>

I've made some progress by using the following:

document.querySelector('input[name=tickets]').checked = true;

But that of course only selects the first radio button. I'd like to able to get a value (1 or 2) and have it select the right button accordingly. The Blockly backend I'm using allows me to define a variable to plug into the line of javascript, but the line of javascript itself has to be essentially a single line. I was hoping one of the following would work if I wanted the value to be 2 for example:

document.querySelector('input[name=tickets][value=2]').checked = true;
document.querySelector('input[name=tickets]').2.checked = true;

But neither does. Any ideas on the correct syntax?

Thank you!

[Here's a JSFiddle I've been using for testing](https://jsfiddle.net/adu1r2j3/) in case it's helpful. — JPTiger, Apr 18 '17 at 19:01
FYI - AppInventor uses [Blockly](https://developers.google.com/blockly/), not Scratch. I updated the question text. — Anm, Jul 21 '17 at 16:19

score 4 · Accepted Answer · answered Apr 18 '17 at 19:03

4

You need to place the value that you are trying to select using in quotes:

document.querySelector('input[name=tickets][value="2"]').checked = true;

Example

document.querySelector('input[name=tickets][value="2"]').checked = true;

<div id="cont_id_tickets">
  <div>
    <input type="radio" name="tickets" value="1" />
    <span style="font-family:Times New Roman; font-size:15px;">1</span>
  </div>
  <div>
    <input type="radio" name="tickets" value="2" />
    <span style="font-family:Times New Roman; font-size:15px;">2</span>
  </div>
  <div id="required_info_tickets" class="requiredInfo floatLeft">
  </div>
  <input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
</div>

answered Apr 18 '17 at 19:03

Rion Williams

74,820
37
200
327

Could you please explain why `[value="2"]` works and `[value=2]` does not? As we don't use quotes for name attribute. – Andrii Litvinov Apr 18 '17 at 19:07
2

Sure. This is due to the [specification rules summarized in this answer](http://stackoverflow.com/a/7286343/557445). Basically, since this selector expects a valid CSS identifier, and identifers ["cannot start with a digit, two hyphens, or a hyphen followed by a digit. ..."](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). So it should work as expected, without quotes if you wanted to target "two", but not so much with "2". You can see an example of that [here](https://jsfiddle.net/adu1r2j3/2/) – Rion Williams Apr 18 '17 at 19:12
Just what I was looking for. Thank you, Rion! – JPTiger Apr 19 '17 at 16:59

How can I check a radio button with no id using a single line of javascript (no jQuery)?

1 Answers1