html select only one checkbox in a group

This snippet will:

  • Allow grouping like Radio buttons
  • Act like Radio
  • Allow unselecting all
// the selector will match all input controls of type :checkbox
// and attach a click event handler 
$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">


 


  

Fruits

 


  
     type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi
  
     type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit
  
     type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango

 

 

Animals

type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Tiger type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Sloth type=“checkbox” class=“radio” value=“1” name=“fooby[2][]” />Cheetah

or

$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);
});

or

 
$('input[type="checkbox"]').on('change', function() {
$
('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Advertisements

HTML5 input type=number and decimals/floats

if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any”
if you only want to accept positive numbers, you’ll want to add min=”0″.

<input type="number" step="any" />
<input type="number" min="0" />