如何在表單中選擇多個單選按鈕？

我想為每個部分選擇是或否。但目前，我一次只能選擇一個單選按鈕。我怎樣才能解決這個問題？

 .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>

uj5u.com熱心網友回復：

這里的問題是您嘗試使用相同的名稱，這就是為什么當您單擊其他按鈕時它會更改。要解決此問題，請給每個是和否問題一個不同的名稱。

這是一個可能看起來像的示例：

<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>

看看我如何更改 name="staffing" 這就是使您的標記不會更改為其他列的原因。

 .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>

uj5u.com熱心網友回復：

同意ShadowGunn

您必須根據每個問題更改單選按鈕的名稱

標籤：

上一篇：簡單的PythonWeb瀏覽器回傳：<p>您的客戶端發出了格式錯誤或非法的請求。<ins>這就是我們所知道的一切。</ins>

下一篇：輸入時間檢查是否為空jquery