CODEWITHSUNDEEP
javascriptjquery
james
james

Reputation: 4049

Radio button check in JS not working?

I think I'm being super obtuse here, so made a fiddle, why is it that whenever I check another radio button, it's not staying checked?

In the fiddle, it will load with the button for "diy" checked; if you click on "paid", you'll see the radio button jump to there when the alert loads, but then jump back, even though the JS statements work independently in the console. Help appreciated! (Btw, I tried 2 ways of checking, both failed)

https://jsfiddle.net/gzf28hsk/

This is the function that's likely breaking, but I don't know where

function populateLogistic(type, new_status = null) {
  radio_paid = $('input[name="delivery"][value="paid"]')
  radio_diy = $('input[name="delivery"][value="diy"]')

  if (new_status === null) {
      radio_paid.prop("checked", false)
      radio_diy.prop("checked", true)
  } else if (new_status == "paid") {
      alert(new_status)
      //radio_paid.checked = true
      //radio_diy.checked = false
      radio_paid.prop("checked", true)
      radio_diy.prop("checked", false)
  } else if (new_status == "diy") {
      //radio_paid.checked = false
      //radio_diy.checked = true
      radio_paid.prop("checked", false)
      radio_diy.prop("checked", true)
  }
}

Upvotes: 0

Views: 256

Answers (1)

Gabriel
Gabriel

Reputation: 2190

Listen to the change event instead.

Update

Actually the problem was that you were doing e.preventDefault(); inside the event handler, canceling the event and undoing the click.

Anyway, it's better to listen to the change event for input changes, because there you're sure that the value have actually changed and because it's also triggered if the input changes without click, for example using the keyboard.

This said, you can (or should) get the selected option with $('input[name="delivery"]:checked').val() instead of $(this).val()

Upvotes: 1

Related Questions