Question

我很困惑哪种方法可以使用无线电按钮。让我们说我有一组3个radiobuttons：如果它们都具有相同的id / name，它将正常工作，只能检查一个：

nationalpolygon <- readRDS(paste0(mypath,"CYM_adm0.rds"))

Error in readRDS("C:/Desktop/CYM_adm0.rds") : 
error reading from connection
In addition: Warning message:
In readRDS("C:/Desktop/CYM_adm0.rds") :
invalid or incomplete compressed data

这种方法的问题是我不知道如何识别哪一个被检查，因为它们都具有相同的名称/ ID。

另一种方式是使用不同的名称/ ID：

Last login: Thu Nov  9 20:48:42 on ttys000
Recep-MacBook-Pro:~ recepinanir$ cd desktop
Recep-MacBook-Pro:desktop recepinanir$ cat hw.c
#include <stdio.h>

int main()
{
    int x= 10;
    int y= 24;
    int z;

  printf("Hello World\n");

  return 0;
}

Recep-MacBook-Pro:desktop recepinanir$ clang hw.c
Recep-MacBook-Pro:desktop recepinanir$ ./a.out
Hello World
Recep-MacBook-Pro:desktop recepinanir$ clang -Wall hw.c -o result
hw.c:5:9: warning: unused variable 'x' [-Wunused-variable]
    int x= 10;
        ^
hw.c:6:9: warning: unused variable 'y' [-Wunused-variable]
    int y= 24;
        ^
hw.c:7:9: warning: unused variable 'z' [-Wunused-variable]
    int z;
        ^
3 warnings generated.
Recep-MacBook-Pro:desktop recepinanir$

这种方式我知道如何使用JQuery知道哪个被检查，但它将允许用户选择多个无线电，就像它是复选框...

如何解决这个难题？

谢谢！

Answer 1

只有单选按钮的名称应该相同，id是元素中的唯一属性。您应该使用不同的ID，并且还可以使用value属性来指定值。代码如下：

<form action="">
  <input type="radio" id="1" name="gender" value="male"> Male<br>
  <input type="radio" id="2" name="gender" value="female"> Female<br>
</form>

您可以使用jQuery获取选定的单选按钮值，如下所示

 $("input[type='radio']").on('change', function () {
         var selectedValue = $("input[name='gender']:checked").val();
         if (selectedValue) {
               alert(selectedValue);
           }
      });

Answer 2

id是一个关键字，可用于在网页上查找特定的元素。

<input type="radio" id="radio1">one
<input type="radio" id="radio2">two

    <input type="radio" id="radio1">one
    <input type="radio" id="radio2">two

您会注意到上面的代码段允许您选择两个单选按钮。没有什么可以将它们连接在一起，浏览器无法假设它们已连接在一起。

name用于确定输入字段中的值 - 或单选按钮 - 来自多个输入字段的单个值。它将单选按钮连接在一起说“嘿，只允许你们中的一个被检查！这就是我们要去的价值！”

<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two

    <input type="radio" name="radio_group">one
    <input type="radio" name="radio_group">two

请注意，上述代码中没有ID。 id和name不可互换。它们是完全单独的属性，旨在完成两个完全不同的事情。

其他答案使用JQuery，这一切都很好，但我认为给出一个vanilla JS示例也很重要。

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
    if (radio.checked) {
      //do whatever
    }
});

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
  radio.addEventListener("change", () => {
    if (radio.checked) alert(radio.value);
  });
});

<input id="radio1" type="radio" name="r_group" value="one">one
<input id="radio2" type="radio" name="r_group" value="two">two
<input id="radio3" type="radio" name="r_group" value="three">three

Answer 3

首先，“id”的值对每个元素应该是唯一的。 name属性可以（并且应该）对于组中的所有元素都相同。

然后，要获取已检查无线电的值：

$('input[name=name_of_your_radiobutton]:checked').val();

Answer 4

第二种方法是错误的，单选按钮中的名称用于将它们分组到同一个类中，只能选择其中一个。

只需使用以下脚本 -

$('input[name="input-rb1"]:checked').val();

避免使用连字符 - 在javascript中使用_如果可能

使用Radiobuttons的正确方法

4 个答案: