Question

我正在尝试制作一个带有问题的网络表单，该表单将由用户回答。这些选项是YES和NO。首先我有单选按钮，但它们看起来很旧，所以我尝试将按钮实现为输入字段中的类型。问题是当我从一个问题中选择和选项时，我无法从另一个问题中选择其他选项

是否有另一种方法可以实现这一目标。喜欢在javascript中。因此，一旦用户选择这些选项，我就可以将该值发送到我的PHP文件。

我的HTML代码：

  <form action="" method="post">
           <label>XYZ QUESTION?</label>
            <input type="button" name="opt" value="YES">
            <input type="button" name="opt" value="NO">

            <label>XYZ QUESTION</label>
            <input type="button" name="opt1" value="YES">
            <input type="button" name="opt1" value="NO">

            <label>XYZ QUESTION?</label>
            <input type="button" name="opt2" value="YES">
            <input type="button" name="opt2" value="NO">
</form>

Answer 1

这绝对是丑陋的:)但它提供了一个例子（那里有很多可能性之一），你可以用CSS来创建单选按钮的外观和感觉;而不是接受浏览器的默认显示。

大＆＃34;技巧＆＃34;这里是可以单击输入标签来触发输入元素的动作。要创建此链接，请确保将<label for="">设置为输入（无线电）元素的唯一ID 。

CSS中的+找到与规则匹配的邻居元素。只需在标签上使用类名就可以实现同样的效果。

:after是一个CSS伪造的元素 - 这些天得到很好的支持（https://caniuse.com/#feat=css-gencontent）

但就像我说的，这只是一个例子。网页搜索类似＆＃34; CSS样式单选按钮＆＃34;将提出大量额外的例子。

＆＃13;

input[type="radio"]{ 
  display: none;
}
input[type="radio"]+label{
  cursor: pointer;
  padding-right: 20px;
}
input[type="radio"]+label:after{
  content: ' ';
  display: inline-block;
  height: 20px;
  width: 20px;
  border: solid 3px green;
  border-radius: 20px;
}
input[type="radio"]:checked+label:after{
  background-color: orange;
}

＆＃13;

<input id="radioYes" type="radio" name="test" value="yes" class="yes" /><label for="radioYes"> YES </label>

<input id="radioNo" type="radio" name="test" value="no" class="no" /><label for="radioNo"> NO </label>

＆＃13;

如何实现单选按钮的按钮

1 个答案: