【问题标题】:3 checkboxes different names and only select one3个复选框不同的名称,只选择一个
【发布时间】:2015-08-13 22:31:39
【问题描述】:

我有三个不同的命名复选框,像这样

    <label><input type="radio" name="selling" value="1" />Parduodu</label><br>
    <label><input type="radio" name="trade" value="1" />Keičiu</label><br>
    <label><input type="radio" name="gift" value="1" />Dovanoju</label>

我怎样才能让那个人只能选择三选一?重要的是收音机的名称应该不同

【问题讨论】:

  • 为什么不能使用同名
  • 投反对票,因为这违反了 HTML 规范。
  • 我在上一条评论中不够清楚:单选按钮有三个不同的名称意味着您有 3 个解耦列表,如 HTML 规范规定的那样。只选择 1 个项目违背了 HTML 的本质,尤其是当您可以对所有项目使用相同的名称并使用不同的值来获得所需的结果时。
  • HTML 2.0 于 1995 年引入了该格式,此后一直保持不变。

标签: javascript php html


【解决方案1】:

你应该这样声明它:

<label><input type="radio" name="type" value="selling" />Parduodu</label><br>
<label><input type="radio" name="type" value="trade" />Keičiu</label><br>
<label><input type="radio" name="type" value="gift" />Dovanoju</label>

然后检查 $_POST['type'] 的值。

【讨论】:

  • 当用户在问题中明确解释“收音机的名称应该不同很重要”时,为什么您保持所有名称相同。这根本没有任何意义。
  • 用户解释了它,但事实是,这就是 HTML 在 1995 年引入 HTML 2.0 时指定的方式。HTML 2.0 规范中甚至有示例解释如何使用收音机纽扣。放弃规范并不得不在 JavaScript 中解决它不是你应该这样做的方式,这就是为什么这个问题被反复低估的原因,因为它是一个糟糕的问题。有时正确的答案是指出为什么这是一个糟糕的问题。
  • 使一组复选框表现得像单选按钮与使 单选按钮 表现得像单选按钮是不同的。 HTML 已经具备使单选按钮像单选按钮一样工作的功能……请遵循规范。
  • @VivekGupta 您可以为单选按钮设置不同的 ID,即使它们具有相同的名称。
【解决方案2】:

基于 D.A.V.O.O.D 的 this answer,您可以为此使用 jQuery。只需在您的复选框中添加一个类(例如“abc”),例如:

<label><input type="radio" name="selling" value="1" class="abc" />Parduodu</label><br>
    <label><input type="radio" name="trade" value="1" class="abc" />Keičiu</label><br>
    <label><input type="radio" name="gift" value="1" class="abc" />Dovanoju</label>

并使用以下 jQuery:

$(".abc").each(function()
{
    $(this).change(function()
    {
        $(".abc").prop('checked',false);
        $(this).prop('checked',true);
    });
});

【讨论】:

  • 谢谢!这行得通!我不知道为什么我不考虑上课.. 我会在 9 分钟内接受答案
  • 当然,禁用JavaScript的时候就不行了,需要加载jQuery来代替标准的浏览器处理。
  • 投反对票,因为这是一个不好的例子,正确的方法是遵循 HTML 规范,将所有名称设置为相同。
  • @JBert 你知道在软件开发中没有正确或错误的方法。只有推荐的方法。但最终你需要完成你的工作。
  • @VivekGupta 如果这意味着您比推荐的方式付出更多的努力,那么可能是错误的方式。再说一次,我不知道提问者的背景,所以我想我们可能不得不同意不同意。
猜你喜欢
  • 2017-08-10
  • 1970-01-01
  • 2013-10-21
  • 1970-01-01
  • 1970-01-01
  • 2015-06-06
  • 2012-03-31
  • 2018-06-23
相关资源
最近更新 更多