文章/答案/技术大牛

发布

社区首页 >问答首页 >无法选中单选按钮和按钮

问无法选中单选按钮和按钮
EN

Stack Overflow用户

提问于 2020-06-11 23:02:54

回答 4查看 81关注 0票数 1

我正在尝试编写一个测验程序，但是单选按钮根本不能被选中。我已经尝试过在谷歌Chrome和Safari上运行它，但没有任何迹象表明它是有效的。当我尝试在Google Chrome和Safari上运行它时，我发现HTML和CSS的代码都没有错误，我真的对此感到困惑。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz About A.I and Psychology</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="header">
        <div class="container">
            <h3>It Starts Here!</h3>
            <p>Take a minute or more to answer these educational quiz that can fill your freetime! </p>
        </div>
    </div>
    <div id="quizSection">
        <div class="container">
            <h4>Starts Here!</h4>
            <div id="selection1" class="sizpos">
                <h5 class="numberQuiz">1</h5>
                <p class="question">Bagaimana A.I Bekerja?</p>
                <form action="#">
                    <p>
                      <input type="radio" id="Select1A" name="radio-group" value="1a" checked>
                      <label for="test1">Dengan cara mengobrak abrik data sampai akhirnya benar</label>
                    </p>
                    <p>
                      <input type="radio" id="Select1B" name="radio-group" value="1b">
                      <label for="test2">Tanpa apapun bekerja</label>
                    </p>
                    <p>
                      <input type="radio" id="Select1C" name="radio-group" value="1c">
                      <label for="test3">Asal tembak</label>
                    </p>
                    <p>
                        <input type="radio" id="Select1D" name="radio-group" value="1d">
                        <label for="test4">A.I bekerja dengan cara menggabungkan data dan memprosesnya layaknya otak manusia</label>
                      </p>
                </form>

            </div>
            <div id="selection2" class="sizpos">
                <h5 class="numberQuiz">2</h5>
                <p class="question">Apakah A.I Akan Menggantikan Manusia?</p>
                <form action="#">
                    <p>
                      <input type="radio" id="Select2A" name="radio-group" value="2a" checked>
                      <label for="test1">Tidak, A.I ada untuk membantu manusia</label>
                    </p>
                    <p>
                      <input type="radio" id="Select2B" name="radio-group" value="2b">
                      <label for="test2">Manusia akan dibunuh oleh A.I</label>
                    </p>
                    <p>
                      <input type="radio" id="Select2C" name="radio-group" value="2c">
                      <label for="test3">Bumi akan hanya ditempati oleh A.I</label>
                    </p>
                    <p>
                        <input type="radio" id="Select2D" name="radio-group" value="2d">
                        <label for="test4">A.I akan dihilangkan</label>
                      </p>
                </form>
                <div id="checkmark2">
                  <!--marking the answer-->
                </div>
            </div>
            <div id="selection3" class="sizpos">
                <h5 class="numberQuiz">3</h5>
                <p class="question">Dalam Dunia Psikologi, A.I di Implementasi Dengan Cara?</p>
                <form action="#">
                    <p>
                      <input type="radio" id="Select3A" name="radio-group" value="3a" checked>
                      <label for="test1">Langsung memberikan jawaban tanpa menganalisa</label>
                    </p>
                    <p>
                      <input type="radio" id="Select3B" name="radio-group" value="3b">
                      <label for="test2">Menganalisa Muka Manusia untuk Mengetahui Masalahnya</label>
                    </p>
                    <p>
                      <input type="radio" id="Select3C" name="radio-group" value="3c">
                      <label for="test3">Menganalisa Muka Manusia dan memberikan jawaban asal</label>
                    </p>
                    <p>
                        <input type="radio" id="Select3D" name="radio-group" value="3d">
                        <label for="test4">Memberikan Jawaban benar tanpa menganalisa sedikitpun</label>
                      </p>
                </form>
                <div id="checkmark3">
                  <!--marking the answer-->
                </div>
            </div>
            <div id="selection4" class="sizpos">
                <h5 class="numberQuiz">4</h5>
                <p class="question">Apakah A.I Sudah Sangat Sempurna?</p>
                <form action="#">
                    <p>
                      <input type="radio" id="Select4A" name="radio-group" value="4a" checked>
                      <label for="test1">Tidak Perlu Dikembangkan, sudah gagal</label>
                    </p>
                    <p>
                      <input type="radio" id="Select4B" name="radio-group" value="4b">
                      <label for="test2">Sangat Sempurna karena sudah 2020</label>
                    </p>
                    <p>
                      <input type="radio" id="Select4C" name="radio-group" value="4c">
                      <label for="test3">Tidak, masih harus dikembangkan</label>
                    </p>
                    <p>
                        <input type="radio" id="Select4D" name="radio-group" value="4d">
                        <label for="test4">Jika dikembangkan akan sia2</label>
                      </p>
                </form>
                <div id="checkmark4">
                  <!--marking the answer-->
                </div>
            </div>
            <div id="selection5" class="sizpos">
                <h5 class="numberQuiz">5</h5>
                <p class="question">Bisakah A.I Mendeteksi Emosi Manusia Melalui Suara?</p>
                <form action="#">
                    <p>
                      <input type="radio" id="Select5A" name="radio-group" value="5a" checked>
                      <label for="test1">Tidak, A.I tidak canggih</label>
                    </p>
                    <p>
                      <input type="radio" id="Select5B" name="radio-group" value="5b">
                      <label for="test2">Ya, A.I akan mendengar dan menganalisa dengan data yang ada</label>
                    </p>
                    <p>
                      <input type="radio" id="Select5C" name="radio-group" value="5c">
                      <label for="test3">A.I akan menganalisa tetapi akan memberikan jawaban yang salah</label>
                    </p>
                    <p>
                        <input type="radio" id="Select5D" name="radio-group" value="5">
                        <label for="test4">A.I akan asal menjawab</label>
                      </p>
                </form>
                <div id="checkmark5">
                  <!--marking the answer-->
                </div>
            </div>
        </div>
        <div id="checkResult">
          <button id="checkBros">
            <h3>Check Answer!</h3>
          </button>
        </div>
    </div>
</body>
</html>

html

css

button

radio-button

click

回答 4

Stack Overflow用户

发布于 2020-06-11 23:13:27

我如何理解，在这种情况下，对于不同的问题，您应该为每个单选按钮组编写不同的"name“属性：

 <div id="quizSection">
    <div class="container">
        <h4>Starts Here!</h4>
        <div id="selection1" class="sizpos">
            <h5 class="numberQuiz">1</h5>
            <p class="question">Bagaimana A.I Bekerja?</p>
            <form action="#">
                <p>
                  <input type="radio" id="Select1A" name="selection1" value="1a" checked>
                  <label for="test1">Dengan cara mengobrak abrik data sampai akhirnya benar</label>
                </p>
                <p>
                  <input type="radio" id="Select1B" name="selection1" value="1b">
                  <label for="test2">Tanpa apapun bekerja</label>
                </p>
                <p>
                  <input type="radio" id="Select1C" name="selection1" value="1c">
                  <label for="test3">Asal tembak</label>
                </p>
                <p>
                    <input type="radio" id="Select1D" name="selection1" value="1d">
                    <label for="test4">A.I bekerja dengan cara menggabungkan data dan memprosesnya layaknya otak manusia</label>
                  </p>
            </form>

        </div>
        <div id="selection2" class="sizpos">
            <h5 class="numberQuiz">2</h5>
            <p class="question">Apakah A.I Akan Menggantikan Manusia?</p>
            <form action="#">
                <p>
                  <input type="radio" id="Select2A" name="selection2" value="2a" checked>
                  <label for="test1">Tidak, A.I ada untuk membantu manusia</label>
                </p>
                <p>
                  <input type="radio" id="Select2B" name="selection2" value="2b">
                  <label for="test2">Manusia akan dibunuh oleh A.I</label>
                </p>
                <p>
                  <input type="radio" id="Select2C" name="selection2" value="2c">
                  <label for="test3">Bumi akan hanya ditempati oleh A.I</label>
                </p>
                <p>
                    <input type="radio" id="Select2D" name="selection2" value="2d">
                    <label for="test4">A.I akan dihilangkan</label>
                  </p>
            </form>
            <div id="checkmark2">
              <!--marking the answer-->
            </div>
        </div>
        <div id="selection3" class="sizpos">
            <h5 class="numberQuiz">3</h5>
            <p class="question">Dalam Dunia Psikologi, A.I di Implementasi Dengan Cara?</p>
            <form action="#">
                <p>
                  <input type="radio" id="Select3A" name="selection3" value="3a" checked>
                  <label for="test1">Langsung memberikan jawaban tanpa menganalisa</label>
                </p>
                <p>
                  <input type="radio" id="Select3B" name="selection3" value="3b">
                  <label for="test2">Menganalisa Muka Manusia untuk Mengetahui Masalahnya</label>
                </p>
                <p>
                  <input type="radio" id="Select3C" name="selection3" value="3c">
                  <label for="test3">Menganalisa Muka Manusia dan memberikan jawaban asal</label>
                </p>
                <p>
                    <input type="radio" id="Select3D" name="selection3" value="3d">
                    <label for="test4">Memberikan Jawaban benar tanpa menganalisa sedikitpun</label>
                  </p>
            </form>
            <div id="checkmark3">
              <!--marking the answer-->
            </div>
        </div>
        <div id="selection4" class="sizpos">
            <h5 class="numberQuiz">4</h5>
            <p class="question">Apakah A.I Sudah Sangat Sempurna?</p>
            <form action="#">
                <p>
                  <input type="radio" id="Select4A" name="selection4" value="4a" checked>
                  <label for="test1">Tidak Perlu Dikembangkan, sudah gagal</label>
                </p>
                <p>
                  <input type="radio" id="Select4B" name="selection4" value="4b">
                  <label for="test2">Sangat Sempurna karena sudah 2020</label>
                </p>
                <p>
                  <input type="radio" id="Select4C" name="selection4" value="4c">
                  <label for="test3">Tidak, masih harus dikembangkan</label>
                </p>
                <p>
                    <input type="radio" id="Select4D" name="selection4" value="4d">
                    <label for="test4">Jika dikembangkan akan sia2</label>
                  </p>
            </form>
            <div id="checkmark4">
              <!--marking the answer-->
            </div>
        </div>
        <div id="selection5" class="sizpos">
            <h5 class="numberQuiz">5</h5>
            <p class="question">Bisakah A.I Mendeteksi Emosi Manusia Melalui Suara?</p>
            <form action="#">
                <p>
                  <input type="radio" id="Select5A" name="selection5" value="5a" checked>
                  <label for="test1">Tidak, A.I tidak canggih</label>
                </p>
                <p>
                  <input type="radio" id="Select5B" name="selection5" value="5b">
                  <label for="test2">Ya, A.I akan mendengar dan menganalisa dengan data yang ada</label>
                </p>
                <p>
                  <input type="radio" id="Select5C" name="selection5" value="5c">
                  <label for="test3">A.I akan menganalisa tetapi akan memberikan jawaban yang salah</label>
                </p>
                <p>
                    <input type="radio" id="Select5D" name="selection5" value="5">
                    <label for="test4">A.I akan asal menjawab</label>
                  </p>
            </form>
            <div id="checkmark5">
              <!--marking the answer-->
            </div>
        </div>
    </div>
    <div id="checkResult">
      <button id="checkBros">
        <h3>Check Answer!</h3>
      </button>
    </div>
</div>

票数 0

Stack Overflow用户

发布于 2020-06-11 23:27:10

正如РамазанАлисханов在他们的回答中提到的，您应该为每个按钮组使用不同的名称。即对于第一个问题中的所有按钮，使用name="answer1"，依此类推。

您还应该使您的标签实际指向等效按钮的ID。也就是说，如果按钮有id="Select5D"，那么标签也应该有for="Select5D"。

或者，您可以让label元素包装按钮本身，这样它就可以自动激活按钮，而无需配置for属性。例如：

<label><input name="answer1" type="radio" value="1a" /><span class="radio_label">Answer A</span></label>

票数 0

Stack Overflow用户

发布于 2020-06-11 23:38:19

我认为你的代码在没有CSS文件的情况下可以正常工作。check here

更多详细信息，需要CSS和其他相关代码，

还是不能正常工作吗？则该错误可能发生在CSS或任何其他文档上

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62327390

复制

相似问题

问无法选中单选按钮和按钮
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法选中单选按钮和按钮EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法选中单选按钮和按钮
EN