CODEWITHSUNDEEP
htmlcss
Shawn Le
Shawn Le

Reputation: 11

How to select multiple radio buttons in a form?

I want to have the option to choose either yes or no for each section. But currently, I can only select one single radio button at a time. How can I fix this?

 .container {
    padding: 20px;
    background-color: rgb(202,236,238);
  }
    .row:after {
    content: "";
    display: table;
    clear: both;
  }
    .col25 {
    color: rgb(100,199,204);
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  .col75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
<form>
                <div class="col75">
                    <input type="radio" name="my-input" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="my-input" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Event staffing required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="my-input" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="my-input" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Coolers/dry ice required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="my-input" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="my-input" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Branded booth required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="my-input" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="my-input" id="no">
                    <label>No</label>
                </div>
            </div>
</form>

Upvotes: 1

Views: 228

Answers (2)

tantaoui zakaria
tantaoui zakaria

Reputation: 66

Agree with ShadowGunn

You must change the name of the radio buttons according to each question

Upvotes: 0

ShadowGunn
ShadowGunn

Reputation: 370

The problem here is that you're trying to use the same name, which is why when you click the other buttons it changes. to fix this give each yes and no question a different name.

Here is a example of what that could look like:

<div class="col25">
              <label>Event staffing required?</label>
            </div>
            <div class="col75">
                <input type="radio" name="staffing" id="yes">
                <label>Yes</label>

                <input type="radio" name="staffing" id="no">
                <label>No</label>
            </div>

See how I changed the name="staffing" this is what makes your mark not change to other columns.

 .container {
    padding: 20px;
    background-color: rgb(202,236,238);
  }
    .row:after {
    content: "";
    display: table;
    clear: both;
  }
    .col25 {
    color: rgb(100,199,204);
    float: left;
    width: 25%;
    margin-top: 6px;
  }
  
  .col75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
<form>
                <div class="col75">
                    <input type="radio" name="my-input" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="my-input" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Event staffing required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="staffing" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="staffing" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Coolers/dry ice required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="coolers" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="coolers" id="no">
                    <label>No</label>
                </div>
            </div>
            <div class="row">
                <div class="col25">
                  <label>Branded booth required?</label>
                </div>
                <div class="col75">
                    <input type="radio" name="brandname" id="yes">
                    <label>Yes</label>

                    <input type="radio" name="brandname" id="no">
                    <label>No</label>
                </div>
            </div>
</form>

Upvotes: 3

Related Questions