uncheck checkbox by selecting another

3

I have a group of checkbox , of which you can mark any of these, however now I need two of them to only allow me to mark one ..

<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="1" id="cv">
    Ver
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="2" id="ca">
    Ver todos
  </label>
</div>                             
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="3" id="cg">
    Guardar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="4" id="cm">
    Editar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="5" id="ce">
    Eliminar
  </label>
</div>

Within this group of checkbox , the options to see - see all I only allowed one of them, that is to select one and uncheck the other, without affecting the rest, I have been using jquery but I could not to achieve it, any ideas?

    
asked by max 13.12.2017 в 00:26
source

1 answer

3

In case you need the user to select only one option among several options you can use the input type="radio" I hope it's what you're looking for greetings

For the radios value to be married, the property name must be equal and thus we define the selection of the user

Explanation of MDN

  

A radio group is defined by giving each of the group option buttons the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently selected option button in the same group.

  

Note: The check boxes are similar to option buttons, but with one important distinction: option buttons are designed to select a value from a set, while check boxes allow you to activate and deactivate values individual. Where there are multiple controls, the radio buttons allow you to select one of them, while the check boxes allow multiple values to be selected.

source: MDN

<div class="radios">
 <label>
    <input type="radio" name="permisos" value="1" id="cv">
    ver
  <label>
  <label>
    <input type="radio" name="permisos" value="2" id="ca">
    ver todos
  </label>

</div>                         
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="3" id="cg">
    Guardar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="4" id="cm">
    Editar
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="permisos" value="5" id="ce">
    Eliminar
  </label>
</div>
    
answered by 13.12.2017 в 00:30