javascript - 两个复选框都被选中

Question

我今天完成了标记工作，然后开始编写代码。所以我们来这里是我的标记代码。

<form action="" id='createchar'>
        <div id="wrapper">

            <!-- Main -->
                <section id="main">
                    <header>
                        <h1>Create New Character</h1>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="username" placeholder="პერსონაჟის სახელი"/>
                        <input type="checkbox" value="1" id="checkboxFourInput" name="male"/>
                        <label for="checkboxFourInput" style="margin-left: 9px;">კაცი</label>
                        <input type="checkbox" value="2" id="checkboxFourInput2" name="female"/>
                        <label for="checkboxFourInput2" style="margin-right: 810px;margin-top: 15px;">ქალი</label>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="explainmg" placeholder="განმარტეთ METAGAMING-ი"/>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="explainpg" placeholder="განმარტეთ POWERGAMING-ი"/>
                        <textarea rows="10" cols="10" name="charbio" placeholder="დაწერეთ თქვენი პერსონაჟის ბიოგრაფი" style="margin-top: 10px; width: 1000px;"></textarea>
                    </header>
                </section>

            <!-- Footer -->
                <footer id="footer">
                    <ul class="copyright">
                        <li>&copy; <a href="http://ls-rp.ge">LS-RP.GE</a></li><li>Design</li>
                    </ul>
                </footer>

        </div>
    </form>

我有这个问题。两个复选框都被选中，但我想避免它。我怎样才能做到？

Answer 1

基本上你应该为此使用 radio :

<form action="" id='createchar'>
        <div id="wrapper">

            <!-- Main -->
                <section id="main">
                    <header>
                        <h1>Create New Character</h1>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="username" placeholder="პერსონაჟის სახელი"/>
                        <input type="radio" value="1" id="checkboxFourInput" name="gender" value="male" />
                        <label for="checkboxFourInput" style="margin-left: 9px;">კაცი</label>
                        <input type="radio" value="2" id="checkboxFourInput2" name="gender" value="female"/>
                        <label for="checkboxFourInput2" style="margin-right: 810px;margin-top: 15px;">ქალი</label>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="explainmg" placeholder="განმარტეთ METAGAMING-ი"/>
                        <input type="text" style="margin-top: 10px; width: 1000px;" name="explainpg" placeholder="განმარტეთ POWERGAMING-ი"/>
                        <textarea rows="10" cols="10" name="charbio" placeholder="დაწერეთ თქვენი პერსონაჟის ბიოგრაფი" style="margin-top: 10px; width: 1000px;"></textarea>
                    </header>
                </section>

            <!-- Footer -->
                <footer id="footer">
                    <ul class="copyright">
                        <li>&copy; <a href="http://ls-rp.ge">LS-RP.GE</a></li><li>Design</li>
                    </ul>
                </footer>

        </div>
    </form>

Note that when use radio you should have all relevant elements have the same value in the name attribute.