Question

我使用JQuery向表单添加单选按钮，我注意到按钮文本的格式为粗体（与标记HTML中的单选按钮或一般文本相比）。

请注意，当我注释掉Bootstrap库时，不会发生此行为。

如何强制文本保持未格式化？

＆＃13;

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

＆＃13;

Answer 1

将标签的css更改为：

label { font-weight:400!important; }

Answer 2

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

使用JQuery vs HTML附加单选按钮 - Bootstrap以不同方式格式化文本

2 个答案: