Question

我的代码出了问题，我无法弄清楚它是什么。我正在使用jQuery mobile生成单选按钮表单。但是，它没有按预期工作。看起来就像这样（图片链接：http://tinypic.com/r/4q0os8/5），它应该列出彼此之下的所有单选按钮

生成的HTML：

 <div data-role="content">
                <h3>
                    Answer This Question
                </h3>
                <form action="storeresponse.php" method="GET" ajax-data="false">
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup" data-type="vertical">
                            <legend>
                                What is your favorite food?                            </legend>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Pizza</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Pasta</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Chicken wings</label>

                                <input id="radio1" value="" name="option" data-theme="c" type="radio">
                                <label for="radio1">Noodles</label>
                                                        </fieldset>
                        <input type="submit" data-theme="b" data-icon="check" data-iconpos="right"
                               value="Submit">
                    </div>

                </form>

当我添加$i++

时，它为每个单选按钮生成相同的ID

Answer 1

其他提示： $i应放在while loop之外。

在您的情况下，您需要使用contorlgroup方法增强radio buttons和create的标记。

jQuery Mobile提供了一个易于增强的动态插入元素，并以这种方式看起来像静态元素。

<强> Demo

用于创建和增强复选框/单选按钮：

$('[type=radio]').checkboxradio().trigger('create');

增强controlgroup

$('[data-role=controlgroup]').controlgroup().trigger('create');

Answer 2

使用<input...>代码包裹<label>和<p>代码：

<?php
                        $sql = "SELECT option_description FROM options WHERE question_id = '$qid'";
                        $result = mysql_query($sql) or die(mysql_error());
                        while ($row = mysql_fetch_row($result)) {
                            $i = 1;
                            $optionName = $row['0'];
                            ?> 
                            <p>
                                <input id="<?php echo 'radio' . $i ?>" value="<?php echo $optionName ?>" name="option" data-theme="c" type="radio">
                                <label for="<?php echo 'radio' . $i ?>"><?php echo $optionName; ?></label>
                            </p>
                            <?php $i++;
                        } ?>

jQuery mobile：单选按钮无法按预期工作

2 个答案: