复选框正在检查两个复选框

Question

I finished working on my markup today and I started working on code. So here we go here is my markup code.

<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>

I have this issue. Both of checkboxes are getting checked but i want to avoid it. how can i make it?

Answer 1

Basically you should use a radio for that:

<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.

</div>