複数のラジオボタンを1つのフォームでチェックする

Question

同じ行で同じフォームにないラジオボタンをチェックするにはどうすればよいですか？私はこれを調査として使用したいと思います。

私は、問題を解決する方法があれば、jQueryの絶対初心者です。

HERESに私のコード（私は、ブートストラップv3.3.7を使用しています。）：

<div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <form action="XXXX" method="post"> 
        <div class="row fragen"> 
         <p> Wie hat es dir gefallen? </p> 
         <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(1, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options"> 
          <label class="btn agree max" onclick="setAnswer(1, -3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree med" onclick="setAnswer(1, -2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree min" onclick="setAnswer(1, -1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn neutral" onclick="setAnswer(1, 0);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree min" onclick="setAnswer(1, 1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree med" onclick="setAnswer(1, 2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree max" onclick="setAnswer(1, 3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(1, 3);">Disagree</div> 
        </div> 
        <div class="row fragen"> 
         <p> Wie hat es dir gefallen? </p> 
         <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(2, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options"> 
          <label class="btn agree max" onclick="setAnswer(2, -3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree med" onclick="setAnswer(2, -2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree min" onclick="setAnswer(2, -1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn neutral" onclick="setAnswer(2, 0);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree min" onclick="setAnswer(2, 1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree med" onclick="setAnswer(2, 2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree max" onclick="setAnswer(2, 3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(2, 3);">Disagree</div> 
        </div> 
        <div class="row fragen"> 
         <p> Wie hat es dir gefallen? </p> 
         <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(3, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options"> 
          <label class="btn agree max" onclick="setAnswer(3, -3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree med" onclick="setAnswer(3, -2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree min" onclick="setAnswer(3, -1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn neutral" onclick="setAnswer(3, 0);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree min" onclick="setAnswer(3, 1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree med" onclick="setAnswer(3, 2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree max" onclick="setAnswer(3, 3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(3, 3);">Disagree</div> 
        </div> 
        <div class="row fragen"> 
         <p> Wie hat es dir gefallen? </p> 
         <div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(4, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" role="group" aria-label="Options"> 
          <label class="btn agree max" onclick="setAnswer(4, -3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree med" onclick="setAnswer(4, -2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn agree min" onclick="setAnswer(4, -1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn neutral" onclick="setAnswer(4, 0);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree min" onclick="setAnswer(4, 1);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree med" onclick="setAnswer(4, 2);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
          <label class="btn disagree max" onclick="setAnswer(4, 3);"> 
           <input type="radio" name="options" autocomplete="off"> 
          </label> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(4, 3);">Disagree</div> 
        </div> 
        <div class="row fragen"> 
         <p> sonst noch was? </p> 
         <textarea type="text" class="form-control" placeholder="bitte nicht zu gemein sein):"></textarea> 
        </div> 
        <input type="submit" value="Senden" id="submit"> 
       </form> 
      </div> 
     </div> 
    </div> 

私は、この側のコードだ：
https://www.16personalities.com/free-personality-testを（このサイトは私が達成したいものを持っていることに注意してください）

ありがとうございます！

Answer 1

一つは、セレクタを使用してDOM要素をターゲットにされていても、プロパティを更新することができます。フォームのラジオボタンでハンドルを取得する場合は、彼は例であり、ここで私はまたプロパティをチェックするように変換しています。 $("input[name='options']").filter('.disagree.min input').prop('checked',true)あなたの入力タグにIDを入れることで、簡単にターゲットを絞ることができます。ここでは、 'name'属性を使用してラジオグループを取得し、ラベルタグのクラスを使用してそれをフィルタリングし、子入力を選択します。他の人が言ったように。ラジオボタンは入力名でグループ化されています。名前を共有するグループ...これらのボタンはトグルして1つだけが選択されます。次に、このコードの例を示します。 https://jsfiddle.net/ecropolis/uLz3kmdb/

Answer 2

ラジオボタンの2番目のセットの名前を変更します。

<input type="radio" name="options" autocomplete="off"> 

何か他のものへ：から

のjQueryの主なプリンシパルの

<input type="radio" name="options-different" autocomplete="off">