Why radio buttons do not work as they should, in theory only one element should remain active and now they work as a checkbox. Here is the html

<form action="#"> <input type="radio" checked name="black" class="color__item"> <input type="radio" name="orange" class="color__item"> <input type="radio" name="blue" class="color__item"> <input type="radio" name="lightblue" class="color__item"> <input type="radio" name="green" class="color__item"> <input type="radio" name="gray" class="color__item"> <input type="radio" name="sand" class="color__item"> <input type="radio" name="white" class="color__item"> <input type="radio" name="pink" class="color__item"> <input type="radio" name="beige" class="color__item"> </form>

  • 3
    The name must be the same for all inputs. But the value value is different. - Moonvvell
  • @Moonvvell thank you very much) - Constantine Shibaev
  • Because you have different name = "" everywhere - Nurmagambet Bolataev

1 answer 1

You all have different input values

 <form action="#"> <input type="radio" checked value="black" name="rdbtn" class="color__item"> <input type="radio" value="orange" name="rdbtn" class="color__item"> <input type="radio" value="blue" name="rdbtn" class="color__item"> <input type="radio" value="lightblue" name="rdbtn" class="color__item"> <input type="radio" value="green" name="rdbtn" class="color__item"> <input type="radio" value="gray" name="rdbtn" class="color__item"> <input type="radio" value="sand" name="rdbtn" class="color__item"> <input type="radio" value="white" name="rdbtn" class="color__item"> <input type="radio" value="pink" name="rdbtn" class="color__item"> <input type="radio" value="beige" name="rdbtn" class="color__item"> </form>