如何將花哨的單選按鈕鏈接到相同的ID？

Question

我想用這些funky radio buttons儘管單選按鈕有一個id =收音機1，ID =第二廣播電臺，ID = radio3等

我想他們都具有ID-收音機1，因此在將結果寫到收音機1數據庫：

這裏是我怎麼也使用相同的ID，在過去工作的正常單選按鈕和他們彼此之間進行切換：

 <div class="form-group col-md-12"> 
     <label class="control-label form-check-inline">Gender</label>* 
      <div class="form-group">  
        <input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label> 
        <input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label> 
      </div> 
     </div> 

$性別= $ _ POST [「性別」];

INSERT INTO [DBO] [SubmissionsTBL] [性別] VALUES （ ' 「trimText（$性別）。」'）

雖然，與時髦的單選按鈕從該chaning：

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio2"/> 
     <label for="radio2">Female</label> 
    </div> 

</div> 

這不工作 - 它不會讓我切換單選按鈕：

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1"/> 
     <label for="radio2">Female</label> 
    </div> 

</div> 

什麼是停止togg樂？ 謝謝！

Answer 1

你的代碼應該改成這樣。單選按鈕的name是提交給後端的東西，而id用於標籤關聯等前端事物。

id應該始終是唯一的。

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio2"/> 
     <label for="radio2">Female</label> 
    </div> 
</div> 

如果通過切換，你的意思是單選按鈕的正常行爲，那麼這種情況發生每當組中的所有單選按鈕具有相同的name。

Answer 2

TL; DR：由於id和name屬性在您的第一個示例中具有相同的值，我相信您可能會混淆這兩者。隨着數據庫通信代碼的提出，它抓住了name="Gender"和而不是的id="Gender"。

更多信息有關id和class雖然你可能會發現作爲互聯網程序員有用：

的id屬性只能適用於每個HTML文件的一個要素。我建議使用class屬性。 id和class之間的主要區別在於可以將class應用於多個元素。

這裏是一個工作解決方案給你提供的代碼：

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio1" class="radio_grp1"/> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio2" class="radio_grp1"/> 
     <label for="radio2">Female</label> 
    </div> 
</div> 

我使用了類.radio_grp1如其名，讓你知道你指的是一組單選按鈕，而不是僅僅一。此外，如果您使用類似bootstrap的庫，則一個元素已經有一個已分配的class是很常見的。爲了解決這個問題，你可以通過添加字符串中空格之後的class屬性，像這樣指定單個元素多個類：

<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/> 

希望這是有用的！