2016-11-09 5 views
0

プレーンHTMLラジオボタンでは、どのボタンが選択されたかを確認するのに便利です(カーソルを移動しても選択されたままです)。ブートストラップを使って同じスタイルを作る方法(つまり、選択したボタンをカーソルを移動した後、より暗くする方法)ここに私のコードはあります:ブートストラップラジオボタンを選択すると、選択後に暗くなるボタンが表示されます

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Button example</title> 
     <link rel="stylesheet" href="./styles/bootstrap.min.css" /> 
     <script type="text/javascript" scr="./scripts/jquery-3.1.1.min.js"></script> 
     <script type="text/javascript" src="./scripts/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 


     <div class="form-group" name="option6" style="text-align: center;"> 
      <div class="btn-group-vertical" data-toggle="buttons"> 

       <label class="btn btn-primary"> 
        <input type="radio" name="option6" checked="checked" value="have">have<br> 
       </label> 

       <label class="btn btn-primary"> 
        <input type="radio" name="option6" value="is having">is having<br> 
       </label> 
      </div>   
     </div> 

    </div>   

    </body> 

</html> 

しかし、このボタンはカーソルを離した後も選択されていません。

+0

あなたは**クラス**のラジオボタンに追加することができます '.darker { ボックスシャドウ:1pxの2ピクセル3px; } ' javscriptを使用 – Dherya

答えて

0

あなたのコードに何か問題が表示されない... JS負荷とCSSの両方のことを確認してくださいここでJSFiddle

に動作します。

(たぶん./styles/bootstrap.min.csscss/bootstrap.min.cssすべきですか?)彼らは をチェックされたときに

+0

私はちょうど私のブートストラップCSSの"スタイル "としてフォルダを命名した。うん、奇妙なことに。 JSFiddleでは動作しますが、私のブラウザでは動作しません。 –

+0

ブラウザのコンソールにエラーが表示されますか? –

+0

Chromeコンソールでエラーメッセージ "キャッチされていないエラー:ブートストラップのJavascriptにjQueryが必要です(...)"が表示されます。それで何ができるのですか? –

関連する問題