当我按页面上的其他任何位置时，单选按钮取消选择

Question

我创建了简单的单选按钮，以便用户可以选择他们喜欢的颜色。它工作了一段时间，但现在已停止保留所选选项。选择一个后，当我按下页面的任何其他部分时，该选项会自行取消选择。

我以前从未有过相同的属性“名称”，但它们正在工作，所以我认为这可能是没有解决它的问题。

              <form name="newActivity" method="post" action="newActivity.php">
                <?php include('errors.php'); ?>
              <label class="colour-title">COLOUR</label>
              <div class="select">
                <label>
                    <input type="radio" name="colour" value="blue">
                    <span class="blue">BLUE</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="purple">
                    <span class="purple">PURPLE</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="pink">
                    <span class="pink">PINK</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="green">
                    <span class="green">GREEN</span>
                </label>
              </div>

如上所示，我的单选按钮也是表单的一部分。

Answer 1

使用 id 代替类

它们之间唯一的区别是“id”在一个页面中是唯一的，最多只能应用于一个元素，而“class”选择器可以应用于多个元素。

例子

 <form name="newActivity" method="post" action="newActivity.php">
                <?php include('errors.php'); ?>
              <label class="colour-title">COLOUR</label>
              <div class="select">
                <label>
                    <input type="radio" name="colour" value="blue">
                    <span id="btn-color">BLUE</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="purple">
                    <span id="btn-color">PURPLE</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="pink">
                    <span id="btn-color">PINK</span>
                </label>
                <label>
                    <input type="radio" name="colour" value="green">
                    <span id="btn-color">GREEN</span>
                </label>
              </div>