2017-08-23 4 views
-1

私は一種のプロフィールページを作ろうとしています。ユーザーが3つのテーマから選択できるようにしたい(サイトのページの色を変更するだけです)。しかし、私はラジオボタンがクリックされたときにそれを作る方法を知らない。 は、ここに私のコードです:ブートストラップラジオボタン(aspx)を作る方法

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel-body"> 
 
    <div class="container"> 
 
    <form> 
 
     <div class="radio"> 
 
      <label> 
 
       <input type="radio" name="optradio">Blue 
 
      </label> 
 
     </div> 
 
     <div class="radio"> 
 
      <label> 
 
       <input type="radio" name="optradio">Red     
 
      </label> 
 
     </div> 
 
     <div class="radio disabled"> 
 
      <label> 
 
       <input type="radio" name="optradio">Wood 
 
      </label> 
 
     </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
</div>

質問です:どのように私は、ラジオボタンは、実際に何かを作るのですか? 編集:私の悪い、私はボタンではなく、実際のラジオボタンを使用したい。私は上記のコードを消去し、それを置き換えました。

+0

ラジオボタンのクリックで背景色を変更したいですか? 例:赤は1番目、青は2番目、緑は3番目ですか? –

+0

ラジオボタンをクリックした後、送信ボタン付きのフォームを使用していない場合は**、**はテーマをユーザーごとに保持している場合は、おそらくajaxコールが必要になります。次に、クラスを変更するためにjsを使用することの問題です。 – GibralterTop

答えて

0

function red() { 
 
    document.getElementById("he").style.backgroundColor = "red"; 
 
} 
 
     function blue() { 
 
    document.getElementById("he").style.backgroundColor = "blue"; 
 
} 
 
     function green() { 
 
    document.getElementById("he").style.backgroundColor = "green"; 
 
}
<body id="he"> 
 
    <div class="panel-body"> 
 
     <div class="container"> 
 
     <form> 
 
     <div class="radio" > 
 
      <label> 
 
      <input type="radio" name="optradio" onclick="blue();">Blue</label> 
 
     </div> 
 
     <div class="radio"> 
 
      <label> 
 
      <input type="radio" name="optradio" onclick="red();">Red</label> 
 
     </div> 
 
     <div class="radio"> 
 
     <label> 
 
      <input type="radio" name="optradio" onclick="green();">Green</label> 
 
     </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
</body>

これは、あなたが右の探しているものです??

+0

コメントをいただきありがとうございますが、背景の色は変更されませんでした。私がやっていなければならないことは他にありますか? – CaporalDxl

+0

私は[Tutorialpoint](https://www.tutorialspoint.com/try_bootstrap_online.php)で色の変化を見ることができますが、JSFiddleで見ると、それは起こっていません。私に欠けている輸入品を見せてください。 –

+0

[JSFiddle Solution](https://jsfiddle.net/dm651kou/1/)も同様です。あなたが確認する必要があるのは、CDNを追加することです。 –