0

我一直在做一个项目，民意调查似乎存在问题：

在网站上，我创建了一个民意调查，其中包含 5 个选项，每个选项都有两个对应的单选按钮，表示是/否。我想确保用户为每个语句/问题选择了一个单选按钮，所以我在输入中使用了“必需”属性，但是，它似乎不起作用：

<tr>
    <td>
        <label for="">Close all liquor shops near and on the National Highways. This will also reduce drunken driving on Highways.</label>
    </td>
    <td>
        Yes<input type=radio name="close" id="close" value=1 required>
        No<input type=radio name="close" id="close" value=2>
    </td>
</tr>

我还尝试了以下而不是“必需”属性：

<tr>
    <td>
        <label for="">Close all liquor shops near and on the National Highways. This will also reduce drunken driving on Highways.</label>
    </td>
    <td>
        Yes<input type=radio name="close" id="close" value=1 required="required">
        No<input type=radio name="close" id="close" value=2>
    </td>
</tr>

我也尝试了 attribute data-required required，但是也没有用。

对于我尝试的每个有效的示例，它们都在一个浏览器（例如 Chrome）中工作，但在 IE 中不起作用。我尝试过的其他几个根本不起作用。

4

3 回答 3

0

尝试使用checked="checked"而不是必需的。如果用户没有选择任何内容，这将选择默认选项。

于 2013-05-20T09:59:55.183 回答
0

根据 HTML5，任何单选按钮中的required属性意味着用户必须选中该按钮所属组中的单选按钮之一。两种变体都使用，required并且required="required"被允许并且意味着完全相同。您的代码存在几个问题，但此功能在两个版本中都是正确的。

这里的问题是并非所有浏览器都支持该required属性。

您可能会考虑添加 JavaScript 代码，以在提交表单时检查其中一个单选按钮是否处于选中状态。当 JavaScript 被禁用时，这自然不会起作用。并且有人可以创建表单的修改副本并使用它来提交数据。因此，服务器端表单处理程序应该验证数据，而不假设客户端检查的任何内容。

关于调查方法，强迫人们做出选择会扭曲数据：用户将停止回答，或者如果他们想继续，他们会随机做出选择。因此，更好的策略使用（至少）三个单选按钮，分别代表是、否和不想回答，然后可能会试图强迫用户在这些之间做出选择（从而接受明确的“不想回答”，但不完全跳过这个问题）。

于 2013-05-20T11:16:02.503 回答
0

在最简单的情况下，我建议（请记住，我不同意您正在做的事情（强迫用户做出选择）或（可怕的）领先和强制性问题的可用选择） ：

$('form').submit(function(e){
        // in this version we're only using it once, so caching may not be necessary
    var self = $(this),
        // finds the radio input elements:
        radios = self.find('input[type="radio"]'),
        /* iterates over the radio elements, creates an array of their names,
           discards the duplicates: */
        groups = $.unique(radios.map(function(){
            return this.name;
        }).get()),
        // gets all the checked radio elements:
        checked = radios.filter(function(){ return this.checked; });

    /* if the checked length is not equal to the number of 'groups',
       there are some left unchecked: */
    return checked.length === groups.length ? true : false;
});

JS 小提琴演示。

笔记：

HTML：已更正为以下内容：

<form action="#" method="post">
    <table>
        <tbody>
            <tr>
                <td>
                    <label for="">Close all liquor shops near and on the National Highways. This will also reduce drunken driving on Highways.</label>
                </td>
                <td>Yes
                    <input type="radio" name="close" value="1" />No
                    <input type="radio" name="close" value="2" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Electronic watch on the National Highways to check speed limit of vehicles. Speed governors should also be installed in the vehicles.</label>
                </td>
                <td>Yes
                    <input type="radio" name="ewatch" value="1" />No
                    <input type="radio" name="ewatch" value="2" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Data base of road accidents on National Highways and effective data collection mechanism.</label>
                </td>
                <td>Yes
                    <input type="radio" name="data_collection" value="1" />No
                    <input type="radio" name="data_collection" value="2" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Stricter punishment for traffic offenders on the Highways and license cancellation of repeat offenders. There should be an online review of license status.</label>
                </td>
                <td>Yes
                    <input type="radio" name="punishment" value="1" />No
                    <input type="radio" name="punishment" value="2" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="locality">People should follow lane system. It will lead to a reduction in the number of accidents</label>
                </td>
                <td>Yes
                    <input type="radio" name="follow" id="follow" />No
                    <input type="radio" name="follow" id="follow" />
                </td>
            </tr>
        </tbody>
    </table>
    <button type="submit">Submit</button>
</form>

重复id的 s 已被删除，checked属性已被删除（由于您要强制用户交互，因此不提供预先检查的选项，这没有任何意义）；我单独留下了空for属性，但s 应该是/文本（因为这是将被单击以与可用选项交互的内容。这将需要每个label属性都是唯一的（就像 HTML规范一样），或者你可以简单地嵌套在元素内，给出如下内容：inputyesnoid inputinputlabel

<label>Yes <input type="radio" name="close" value="1" /></label>
<label>No <input type="radio" name="close" value="2" /></label>

参考：

于 2013-05-20T19:17:09.513 回答