Question

我正在构建一个插件，可根据用户的选择更改网站的背景颜色，以便进行练习。我用单选按钮做这件事。我希望用户只有一个选择，比如普通的单选按钮行为，但在管理页面中，他可以选择多种颜色，如复选框行为，甚至无法撤消选择所做的。

代码：

<div class = "wrap">
    <h3>Please choose a color</h3>
    <form style = "line-height:400%" method = "POST" action = "">
        Black <input type="radio" name = "black" value = "Black" /> 
        White <input type = "radio" name = "white" value = "White" />
        Red <input type = "radio" name = "eed" value = "Red" />
        Green <input type = "radio" name = "green" value = "Green" />
        Yellow <input type = "radio" name = "yellow" value = "Yellow" /> <br/>
        Orange <input type = "radio" name = "orange " value = "Orange " />
        Blue <input type = "radio" name = "blue" value = "Blue" />
        Pink <input type = "radio" name = "pink" value = "Pink" />
        Purple <input type = "radio" name = "purple" value = "Purple" />
        Brown <input type = "radio" name = "brown" value = "Brown" /><br/>
        <p>Hax color<input type = "text" name = "hax" size = "5" /></p>

    </form>
</div>

我该如何解决？

Answer 1

您遇到的问题是您没有将所有单选按钮链接到一个组中。那样单选按钮就会知道＆＃34;当你选择其中一个时，所有其他人都将取消选择。您只需要为它们提供相同的name属性即可。此属性实际上是他们所在的组的名称。你可以在这里看到一个例子：

http://www.echoecho.com/htmlforms10.htm

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="action" method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Wine<br>
</div>
</form>
</body>
</html>

Answer 2

该名称指示该字段属于哪组单选按钮。选择一个按钮时，同一组中的所有其他按钮都将被取消选中。因此，对所有单选按钮使用相同的名称。

就像，

        Black <input type="radio" name = "color" value = "Black" /> // here I use color as the name for all buttons
        White <input type = "radio" name = "color" value = "White" />
        Red <input type = "radio" name = "color" value = "Red" />
        Green <input type = "radio" name = "color" value = "Green" />
        Yellow <input type = "radio" name = "color" value = "Yellow" /> <br/>
        Orange <input type = "radio" name = "color" value = "Orange " />
        Blue <input type = "radio" name = "color" value = "Blue" />
        Pink <input type = "radio" name = "color" value = "Pink" />
        Purple <input type = "radio" name = "color" value = "Purple" />
        Brown <input type = "radio" name = "color" value = "Brown" /><br/>

WP管理页面上的单选按钮

2 个答案: