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 回答