How to select multiple radio buttons in a form?-CodePudding

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 >
                    <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 >
                <div >
                  <label>Event staffing required?</label>
                </div>
                <div >
                    <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 >
                <div >
                  <label>Coolers/dry ice required?</label>
                </div>
                <div >
                    <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 >
                <div >
                  <label>Branded booth required?</label>
                </div>
                <div >
                    <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>

CodePudding user response：

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 >
              <label>Event staffing required?</label>
            </div>
            <div >
                <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 >
                    <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 >
                <div >
                  <label>Event staffing required?</label>
                </div>
                <div >
                    <input type="radio" name="staffing" id="yes">
                    <label>Yes</label>

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

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

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

CodePudding user response：

Agree with ShadowGunn

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