Question

我想使用这些funky radio buttons虽然单选按钮的id = radio1，id = radio2，id = radio3等

我希望他们所有人都有id-radio1所以它将结果写入数据库中的radio1：

以下是我过去使用相同ID工作的普通单选按钮的方法，它们之间相互切换：

      <div class="form-group col-md-12">
      <label class="control-label form-check-inline">Gender</label>*
          <div class="form-group">       
                    <input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
                    <input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
          </div>  
      </div>

$性别= $ _ POST [＆＃34;性别＆＃34;];

INSERT INTO [dbo]。[SubmissionsTBL] [性别] VALUES （＆＃39;＆＃34; .trimText（$性别）＆＃34;＆＃39）

尽管如此，还有时髦的单选按钮：

<div class="funkyradio">
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio" id="radio1" />
        <label for="radio1">Male</label>
    </div>
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio" id="radio2"/>
        <label for="radio2">Female</label>
    </div>

</div>

这不起作用 - 它不允许我切换单选按钮：

<div class="funkyradio">
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio" id="radio1" />
        <label for="radio1">Male</label>
    </div>
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio" id="radio1"/>
        <label for="radio2">Female</label>
    </div>

</div>

什么阻止了切换？谢谢！

Answer 1

TL; DR：由于id和name属性在您的第一个示例中具有相同的值，我相信您可能会混淆两者。使用您提供的数据库通信代码，它抓住了name="Gender"和而不是 id="Gender"。

有关id和class的其他信息，尽管您可能会觉得有用的是互联网程序员：

id属性只能应用于每个HTML文档的一个元素。我建议改用class属性。和id和class之间的主要区别在于class可以应用于多个元素。

以下是您提供的代码的解决方案：

<div class="funkyradio">
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
        <label for="radio1">Male</label>
    </div>
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
        <label for="radio2">Female</label>
    </div>
</div>

我使用了课程.radio_grp1作为名称，以便您知道您指的是一组单选按钮而不仅仅是一个。

此外，如果您正在使用像引导程序这样的库，那么元素已经分配了class是很常见的。要解决此问题，您可以通过在class属性后面的字符串中添加空格来分配单个元素多个类，如下所示：

<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>

希望这很有用！

Answer 2

您的代码应该更改为这样的代码。单选按钮name是提交给后端的内容，id用于标签关联等前端内容。

ID应该始终是唯一的。

<div class="funkyradio">
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio1" />
        <label for="radio1">Male</label>
    </div>
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio2"/>
        <label for="radio2">Female</label>
    </div>
</div>

如果通过切换，则表示单选按钮的正常行为，只要组中的所有单选按钮具有相同的name，就会发生这种情况。

如何将花哨的单选按钮链接到相同的ID？

2 个答案: