空想のラジオボタンを同じIDにリンクするにはどうすればいいですか？

Question

ラジオボタンは、IDを持っているのに

私はこれらのfunky radio buttonsを使用したい= Radio1の、ID = radio2、ID = radio3など

それがでRadio1のに結果を書き込みますので、私は、ID-Radio1のを持っているためにそれらのすべてをしたいと思いますデータベース：

ここでは、私は同じ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属性があるため、2つを混同している可能性があります。あなたが置くデータベース通信コードでは、それはname="Gender"とではなく、のid="Gender"です。

追加情報についてidとclassあなたがインターネットプログラマとして役立つかもしれませんが：id属性のみ、HTML文書ごとに一つの要素に適用することができます

。代わりにclass属性を使用することをお勧めします。 idとclassの主な違いは、classを複数の要素に適用できることです。ここで

は、あなたが提供するコードに取り組んソリューションです：あなたはあなただけではなく、ラジオボタンのグループに言及していることを知っているように、私は名前としてクラス.radio_grp1を使用

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

1。

さらに、ブートストラップのようなライブラリを使用している場合、要素に既にclassが割り当てられていることがよくあります。これは有用であった

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

希望：この問題を解決するために、あなたはそうのようなclass属性次の文字列にスペースを追加することにより、単一の要素複数クラスを割り当てることができます！