Allow radio fields to be set to decheckable on second check

You could do something like this:

var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  s = $this.is(":checked")
}).mouseup(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  $this.prop("checked", !s)
}).click(function(e) {
  e.preventDefault()
});

var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  s = $this.is(":checked")
}).mouseup(function(e) {
  var $this = $(this).is(":radio") ? $(this) : $(this).prev();
  $this.prop("checked", !s)
}).click(function(e) {
  e.preventDefault()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="detickable-radio">
  <li><input name="x1" type="radio" value="a" id="r_1_1"><label for="r_1_1">First Q First A</label></li>
  <li><input name="x1" type="radio" value="b" id="r_1_2"><label for="r_1_2">First Q 2nd A</label></li>
</ul>
<ul>
  <li><input name="y1" type="radio" value="c" id="r_2_1"><label for="r_2_1">Second Q First A</label></li>
  <li><input name="y1" type="radio" value="d" id="r_2_2"><label for="r_2_2">Second Q 2nd A</label></li>
</ul>
<ul class="detickable-radio">
  <li><input name="z1" type="radio" value="e" id="r_3_1"><label for="r_3_1">Third Q First A</label></li>
  <li><input name="z1" type="radio" value="f" id="r_3_2"><label for="r_3_2">Third Q 2nd A</label></li>
</ul>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top