jQuery - radio button on click and not on change

Question

I'm trying to find a solution to an issue I have between click and change. I need to capture the click event and not change. I'll explain the situation:

I have a radio button list with 3 items. Each click I need to clean a div. However, If i'm posting back and return to the client with an error(submit, server validation check failed), the change event is fired once again (obviously), and the div is cleaned.

Is there a way to distinguish between click and the checked state?

I hope I have made myself clear. Edit: Added some code:

$("input[name*='SelectedOwner']").on('change',
function () {
    var radioId = $(this).val();
    if (radioId === "2" || radioId === "3") {
        $("#div1").hide();
        $("#divclean :input").removeAttr("disabled");
    } else {
        $("#div1").show();
        $("#divclean :input").attr("disabled", true);
    }
});
$("input[name*='SelectedOwner']").on('click', function () {
   //Clean the output at each change
   $("#divclean :input").val("");
});

Thanks.

Please provide a [mcve]. Not obvious at all why change would fire more than once — charlietfl, Feb 09 '17 at 13:45
Take a look at this [Fiddle](https://jsfiddle.net/u8Lq1p1g/), hope it can help you — Yuri, Feb 09 '17 at 13:54
I think you need to use localStorage to store clicked radios — sTx, Feb 09 '17 at 14:13
I was missing the :checked on the document.ready when loading after the server validation. RunHideOrShow($("input[name*='SelectedOwner']:checked").val()); Thanks everyone! — Erez Savir, Feb 09 '17 at 14:30
your server call is with ajax?? if not your page must be refreshing, so how can `checked` remain the same? — sTx, Feb 09 '17 at 14:36
I'm using asp.net mvc, this is the ModelState check. The values persist if the model is not valid. — Erez Savir, Feb 09 '17 at 14:39

Laurianti · Answer 1 · 2017-02-09T14:07:58.307

 $('input[name="choose"]').click(function(e) {
   if ($(this).data('clicked')) {
    $('#theDiv').text('You have REclicked "'+ $(this).val() + '" value');
   }
   else {
    $('input[name="choose"]').data('clicked', false);
    $(this).data('clicked', true);
    $('#theDiv').text('First time you click "'+ $(this).val() + '" value');
   }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
  <div id="theDiv"></div>
  
  A
  <input type="radio" name="choose" value="a" />
  
  B
  <input type="radio" name="choose" value="b" />
  
  C
  <input type="radio" name="choose" value="c" />

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

You should to bind the change event to every radio button:

$("#r1, #r2, #r3").change(function () { }

With jQuery is also possible:

if ($("#r1").is(":checked")) {}

More informations: JQuery $(#radioButton).change(...) not firing during de-selection

I hope this helps...

Good Luck!

edited May 23 '17 at 11:46

Community

1
1

answered Feb 09 '17 at 13:54

ℛɑƒæĿᴿᴹᴿ

4,983
4
38
58

jQuery - radio button on click and not on change

2 Answers2