2017-06-01 4 views
0

JQueryを使用してフォームにラジオボタンを追加すると、ボタンのテキストが太字になっていることに気付きました(HTML、または一般的なテキスト)。JQueryとHTMLを使用してラジオボタンを追加する - ブートストラップでテキストの書式が異なる

ブートストラップライブラリをコメントアウトするとき、この現象は発生しません。

テキストを書式なしのままにするにはどうすればよいですか?

<!DOCTYPE html> 
 
<html lang="en" xmlns:background-color="http://www.w3.org/1999/xhtml"> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 

 
    <body> 
 
     <div>Normal text</div> 
 
     <form id="myJSForm" ></form> 
 
     <form id="myNormalForm"> 
 
      <input type="radio">myNormalForm</input> 
 
     </form> 
 
    </body> 
 

 
    <script> 
 
     var myRadioButton = $('<input>',{ 
 
      type: 'radio', 
 
      name: 'myRadio', 
 
      value: 'myRadio' 
 
     }); 
 

 
     $('<label>', { 
 
      insertAfter:'#myJSForm', 
 
      append: [myRadioButton, 'myJSForm'] 
 
     }); 
 
    </script> 
 

 
</html>

答えて

0

ラベルの変更CSSなど:

label { font-weight:400!important; }

0

input要素

<!DOCTYPE html> 
 
<html lang="en" xmlns:background-color="http://www.w3.org/1999/xhtml"> 
 

 
    <head> 
 
     <meta charset="utf-8"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 

 
    <body> 
 
     <div>Normal text</div> 
 
     <form id="myJSForm" ></form> 
 
     <form id="myNormalForm"> 
 
      <input type="radio">myNormalForm</input> 
 
     </form> 
 
    </body> 
 

 
    <script> 
 
     var myRadioButton = '<input type="radio">myJSForm</input>' 
 

 
     $('#myJSForm').append(myRadioButton); 
 
    </script> 
 

 
</html>
を挿入する別の方法

+0

ありがとうございました。 "要素を作成+属性を指定する"メソッドを使用してそれを行う方法はありますか?コードははるかに簡単に読む – GlaceCelery

関連する問題