Question

un-selecting a radio button

Laserfiche Forms Version 10

Updated June 27, 2018

asked on November 7, 2017

As the title would say is there a way to un-select a radio button after selecting it instead of having to put a "None" option. For example you have Option 1, and Option 2. I know for radio buttons if you click into one you will have to choose an option is there a way to un-select it without having to change it to a text box?

0 0

Answer

SELECTED ANSWER

replied on November 8, 2017

Hi Charlie,

I should have clarified the JavaScript part--I left out the $(document).ready... part. Please try this:

$(document).ready(function() {
  $('.deselect').on('click', function() {
    $('.radio input').prop('checked', false);
  });
});

It's likely the case that your radio buttons look different than the ones from my example because your "Layout" setting is set to "Side by side", where mine is set to "1 column":

I hope this helps!

~Rob

2 0

Replies

replied on June 27, 2018

This worked great. The only issue I had was that my two sets of radio buttons has a lot of field rules associated with them. When I deselected/cleared all radio button choices, the screen needed to refresh so the radio button choices disappeared too. Here's what I did to make that work. I added .change() to the end of the radio input:

$(document).ready(function(){

//Allow deselecting of radio buttons
$('.deselect').on('click', function() {
$('.radio input').prop('checked', false).change();
});

}) //close document.ready

2 0

replied on November 7, 2017 • Show version history

Hi Charlie,

I would recommend the following approach.

Assign a class to your radio button group:
Drop a "Custom HTML" "field" under your radio button group and assign it the class "deselect":
Add the following CSS to the CSS pane under the CSS and JavaScript tab:
```
.deselect {  
  color: #0087D3;
  cursor: pointer;
}
```

Add the following JS to the JS pane:

$(document).ready(function() {
  $('.deselect').on('click', function() {
    $('.radio input').prop('checked', false);
  });
});

And that should do it! Essentially, you're styling a paragraph (<p></p>) to look/behave like an anchor (<a></a>). The JavaScript unchecks the radio group when the "Deselect" "link" is clicked.

~Rob

1 0

View 1 previous reply

replied on November 8, 2017

Rob -

Thanks for the help. I have applied the codes, and also gave a css class to both my radio buttons, and html. But it doesn't seem to work. Clicking on deselect doesn't do anything to my radio buttons. Also my radio buttons looks different as well.

0 0

SELECTED ANSWER

replied on November 8, 2017

Hi Charlie,

I should have clarified the JavaScript part--I left out the $(document).ready... part. Please try this:

$(document).ready(function() {
  $('.deselect').on('click', function() {
    $('.radio input').prop('checked', false);
  });
});

It's likely the case that your radio buttons look different than the ones from my example because your "Layout" setting is set to "Side by side", where mine is set to "1 column":

I hope this helps!

~Rob

2 0

replied on November 8, 2017

Yes this works. I totally forgot with JS we needed that opener and closer :). Thank You

0 0

replied on November 8, 2017

No problem, glad to help!

0 0

You are not allowed to follow up in this post.

Question

Question

un-selecting a radio button

Answer

Replies

Sign in to reply to this post.