1

I have been attempting to allow radio buttons to be deselected using jQuery, but I am running into issues with the prop function. When this code runs, my conditional ($(e.currentTarget).prop('checked')) always evaluates to true.

Here is a fiddle which demonstrates my issue: Jsfiddle

FYI: I am using jQuery 1.8.2, and I cannot update it because it is a legacy project with many dependencies. Also, I MUST use radio buttons per the client's request.

Javascript:

$("input[name=optionMedia]").click(function(e) {
    if ($(e.currentTarget).prop('checked')) {
        $(e.currentTarget).prop('checked', false);
    }
});

Html:

<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
dpasie2
  • 83
  • 1
  • 1
  • 10
  • 4
    If you want to uncheck then use `checbox`'s instead, `radio` type is not made for this purpose. – Zakaria Acharki Feb 10 '17 at 15:56
  • 1
    Complementing to Zakaria's comment, radiobuttons always needs to have exactly 1 checked. Not 0, not 2. If you want to be able to have 0 checked, you should use checkboxes, and if you want to uncheck the others when one is checked, then that is done via javascript. – pablito.aven Feb 10 '17 at 15:57
  • Checkboxes are not an option. I have to use radio buttons per the client's request. – dpasie2 Feb 10 '17 at 15:58
  • 1
    Radio buttons are not made for this purpose and you are trying to force a non spec'd behavior - always a bad idea. One option always has to be selected. You wont be able to override this behavior in any consistent way. Use checkboxes instead if you need to be able to deselect. – Korgrue Feb 10 '17 at 15:59
  • 2
    The you need to explain to the client that they simply do not work that way an no amount of programming will be able to change that. Radio button behavior is specified by the W3C and web clients are developed to adhere to those specs. You are trying to force your browser to do something that it is not built to do. – Korgrue Feb 10 '17 at 16:01
  • 1
    @pablito.aven - I partially disagree. It is actually very common to have 0 checked values in a radio group. It's a common UX pattern to have a required, radio button group, with no default value, in order to force the user to consciously make a choice. Not saying that that is what he's doing here, but it is a completely valid use case. – talemyn Feb 10 '17 at 16:02
  • 1
    You can use checkboxes and style them to make them look like radiobuttons – pablito.aven Feb 10 '17 at 16:02
  • 1
    I'm not even clear on what the actual goal is here. Your example code has two radio buttons -- what should happen? – j08691 Feb 10 '17 at 16:03
  • 1
    Well, client is out of luck unfortunately. In the cases where you start with an unchecked radio button - radio buttons were not actually used. You can use checkboxes and make them behave (and even look) like radio buttons with a couple lines of script and CSS. Solution here: http://stackoverflow.com/questions/23523987/making-checkboxes-behave-like-radio-buttons – Korgrue Feb 10 '17 at 16:03
  • @j08691 on second click, it should deselect. – dpasie2 Feb 10 '17 at 16:10
  • @talemyn I tried the solution proposed in that post and it did not work for my case. Not a duplicate. – dpasie2 Feb 10 '17 at 16:11
  • @Korgrue I know it isn't ideal, but we are sure there is no absolutely way to accomplish this? There are so many other posts where they seem to have done it. Styling a checkbox to look like a radio button seems like a great alternative though. I will do that if it is indeed not possible. Thanks for that recommendation! – dpasie2 Feb 10 '17 at 16:18
  • 2
    Is this what you're after https://jsfiddle.net/q7r9btbb/? – j08691 Feb 10 '17 at 16:19
  • @j08691 YES!!! That is exactly what I am going for! And it works in my project! Why does setting a timeout work? That's so odd! – dpasie2 Feb 10 '17 at 16:24
  • 1
    @dpasie2 - Yeah, I'm glad this got re-opened . . . your issue was likely that the default click behavior (i.e., to check the radio button) was fighting with your logic. Since the `click` event is automatically triggered by the combination of the `mousedown` and `mouseup` event on a single element, **j08691**'s code runs the check one the `mouseup` event, **before** the `click` event is triggered. That way the check is done before the default "click" behavior occurs (testing it's "pre-click" state), and but then waits until after its done, before changing the `checked` property to false. – talemyn Feb 10 '17 at 17:08

3 Answers3

1

You can do it like this

$('input.bigSizeInput').mouseup(function() {
  if ($(this).is(':checked')) {
    setTimeout(function() {
      $('input.bigSizeInput:checked').prop('checked', false);
    }, 1)
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
j08691
  • 204,283
  • 31
  • 260
  • 272
0

This is because checked is a property. If its there it is true, if its not it is not true. Hence you either should switch to a checkbox or use

$("..").removeProp('checked')

Niku Hysa
  • 66
  • 1
  • 12
0

Using checkbox to check/uncheck is better than radio button. But if you want to use radio button, you need to check if radio is checked, copy it using and remove checked attribute of copied element and then insert it after target radio. At the end remove original radio. 

$(document).on("mousedown", "input[name=optionMedia]", function(e) {
  if (this.checked)
    $(this).clone().prop('checked', false).insertAfter(this).end().remove();      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
Mohammad
  • 21,175
  • 15
  • 55
  • 84