html select only one checkbox in a group

Question

So how can I only allow a user to select only one checkbox?

I know radio buttons are "ideal", but for my purpose...it's not.

I have a field where users need to select either or of the two options, but not both. The problem is that I need my users to also be able to unselect their option, and this is where radio buttons fail because once you select the group, you have to choose an option.

I will be validating the info via php, but I'd still like to restrict the users to one answer if they want to give it.

Answer 1

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);    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>      <div>    <h3>Fruits</h3>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>  </div>  <div>    <h3>Animals</h3>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>    <label>      <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>  </div>