html problem

buklu · January 27, 2019

how do i permit to select twp campus?how do i clear the Name using reset function?

here's my code:

   <img src="logo.gif"/>
<p>
       <ul><li>Home</li></ul>
       <ul><li><a href="#">Contact Us</a></li></ul>
</p>

<form>
<p>
   Selection Dapartment:
   <input type="radio" name="ans" value="I"/>IT
   <input type="radio" name="ans" value="D"/>Design
</p>

<p>
   Select two Campus:
       <input type="checkbox" checked="checked"/>Chai Wan
       <input type="checkbox"/>Tsing Yi
       <input type="checkbox"/>Lee Wai Lee

</p>

   <input type="submit" value="Submit"/>
   <input type="reset" value="Clear"/>

</form>
</body>
</html>

Boshentz · January 27, 2019

With a little help from jQuery you can limit selected checkboxes to 2.

Also, for input type=reset to work with select, you must specify one default value (if you don't want default value to be selectable, just make it disabled). Check this link: https://jsfiddle.net/vy37Lm5t/

duncannah · January 27, 2019

Here's non-jQuery-dependent code:

<!-- wrap the checkboxes in something like a div -->
<div>
        <input type="checkbox" checked="checked" onchange="check(this)"/>Chai Wan
        <input type="checkbox" onchange="check(this)"/>Tsing Yi
        <input type="checkbox" onchange="check(this)"/>Lee Wai Lee 
</div>

<script>
  function check(el) {
    if(el.checked && el.parentNode.querySelectorAll("input:checked").length > 2)
      el.checked = false;
  }
</script>