Question

我是jquery mobile的新手。

请找到以下代码......

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>
        var count = 1;
        var newSet = '<div data-role="fieldcontain">' + 
            '<fieldset data-role="controlgroup">'+
             '</fieldset></div>';

        $(function (){
            $('.cbDiv').append(newSet);
        }) ;            

        $(document).on("click", ".add", function() {                        
            newSet = newSet += '<input type="radio" name="radio' + count + '" id="radio' + count + '" value="radio' + count + '" />' + 
            '<label for="radio' + count + '">radio' + count + '</label>';
            $(".cbDiv").html(newSet);           
            count++;
        });

    </script>
</head>
<body>
    <div data-role="page" id="page">
        <div data-role="content">
            <input type="button" class="add" value="Add Radio Button" />
            <div class="cbDiv"></div>
        </div>
    </div>
</body>

我在jquery mobile中动态添加单选按钮。它工作正常.. 但是，它不能用作单选按钮（即单选）。它作为一个复选框工作。（即多选）。

如何防止这种情况？

此样式尚未应用。

Answer 1

使用单选按钮，您需要提供name属性。如果为每个框指定相同的名称，则它将表现为单个选择而不是复选框。在您的情况下，他们使用每个单选按钮命名属性更改。您应该从中删除该号码，它应该按预期工作。

此jsfiddle显示了它的工作原理。

如果使用正确的类和CSS选择器，则应该应用样式。如果没有，则添加错误的类，否则您的CSS会出错。

修改：我看到您使用radio作为id。您应该将其设置为class，因为id应仅用于页面上的单个元素。

收音机和复选框功能

1 个答案: