Question

我一直致力于一个项目，poll似乎存在问题：

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

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

我也尝试了属性data-required required，但这也无效。

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

Answer 1

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

Answer 2

任何单选按钮中的required属性，通过HTML5表示用户必须选中该按钮所属的组中的一个单选按钮。使用的两种变体required和required="required"都是允许的，并且意思完全相同。您的代码存在一些问题，但这两个版本的功能都是正确的。

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

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

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

Answer 3

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

$('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 Fiddle demo

注意：

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，已删除checked属性（因为您要强制执行用户互动，不提供预先检查的选项，这没有任何意义）;我单独留下了空for个属性，但label的{{1}}应该是input / yes文字（因为这就是要点击的内容）与可用选项进行交互。这需要一个唯一的no 每个 id（就像HTML 规范一样），或者你可以简单地将input嵌套在input元素中，提供如下内容：

label

参考文献：

Attribute-equals ([attribute=value]) selector。
filter()。
find()。
get()。
jQuery.unique()。

需要替换html标签吗？

3 个答案: