html - create radio button with javascript - Stack Overflow

admin管理员组

文章数量:1418593

I have a html table built from a DB. It has a "Edit" button that will open up a form.

One of those input types will be a radio button I want to generate with On/Off selection:

<input type="radio" name="camera_status" value="On" /> On<br />
<input type="radio" name="camera_status" value="Off" /> Off

I have 3 problems:

1. I don't know how to create multiple radio options. The code below only creates one.

2. How do I make the value I passed in "camerastatus" the default checked value?

3. I need to have multiple labels. The form will be "Camera status" then labels for On/Off.

Code:

function edit2(to, cameraname, cameraquality, camerastatus, emailnotice, camerahash)
{
   var mydiv = document.getElementById("editform");
   var myForm = document.createElement("form");
   myForm.method = "post";
   myForm.action = to;

   //camera_status
   label = document.createElement("label");
   label.for = "text";
   label.innerHTML="<br>Camera status: <br>";
   myForm.appendChild(label);

   var myRadioElement;
   try{
      myRadioElement = document.createElement('<input type="radio" name="camera_status" />On');
   }catch(err){
      myRadioElement = document.createElement('input');
   }

   myRadioElement.type = "radio";
   myRadioElement.name = "camera_status";

   myForm.appendChild(myRadioElement);

   mydiv.appendChild(myForm);
}

I have a html table built from a DB. It has a "Edit" button that will open up a form.

One of those input types will be a radio button I want to generate with On/Off selection:

<input type="radio" name="camera_status" value="On" /> On<br />
<input type="radio" name="camera_status" value="Off" /> Off

I have 3 problems:

1. I don't know how to create multiple radio options. The code below only creates one.

2. How do I make the value I passed in "camerastatus" the default checked value?

3. I need to have multiple labels. The form will be "Camera status" then labels for On/Off.

Code:

function edit2(to, cameraname, cameraquality, camerastatus, emailnotice, camerahash)
{
   var mydiv = document.getElementById("editform");
   var myForm = document.createElement("form");
   myForm.method = "post";
   myForm.action = to;

   //camera_status
   label = document.createElement("label");
   label.for = "text";
   label.innerHTML="<br>Camera status: <br>";
   myForm.appendChild(label);

   var myRadioElement;
   try{
      myRadioElement = document.createElement('<input type="radio" name="camera_status" />On');
   }catch(err){
      myRadioElement = document.createElement('input');
   }

   myRadioElement.type = "radio";
   myRadioElement.name = "camera_status";

   myForm.appendChild(myRadioElement);

   mydiv.appendChild(myForm);
}

• javascript
• html

Share Improve this question Follow edited Dec 7, 2011 at 3:04 Jared Farrish 49.3k1717 gold badges9999 silver badges107107 bronze badges asked Dec 7, 2011 at 2:59 TomTom 2,6341111 gold badges6161 silver badges9696 bronze badges 1

• "I don't know how to create multiple radio options. The code below only creates one." - So take the bit that creates one and repeat it. Also, get rid of the try/catch and just do it the way you've got in the catch (along with the two lines after the end of the catch block). But wouldn't a checkbox be better suited to an on/off field? – nnnnnn Commented Dec 7, 2011 at 3:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

To make a radio button the default, add the checked attribute.

<input type="radio" name="..." checked />

Wouldn't it be better to use a checkbox for something that can be on or off?

<input type="checkbox" ... />

"Male" value is checked:

<div><input type="radio" name="Gender" value="Male" checked="checked" /> Male</div>
<div><input type="radio" name="Gender" value="Female" checked="" /> Female</div>

To do this in JavaScript you could just put a block of code where you needed the radio buttons, and use document.write with a for loop for each radio button you need. (You'll also want to change the value every time too, of course.)

-Neil

本文标签： htmlcreate radio button with javascriptStack Overflow