Button to untick choice selections stops working after save

It's only working some of the times likely because you're setting it as an attribute rather than a property. 

//BAD: uses '.attr()' 
NWF$("document").ready(function() {
  var strOption = NWF$("#" + varOption).find("input:checked").val();
  NWF$("#" + varOption).find("input[value='" + strOption + "']").attr("checked", false);
});

//GOOD: uses '.prop()'
NWF$("document").ready(function() {
  var strOption = NWF$("#" + varOption).find("input:checked").val();
  NWF$("#" + varOption).find("input[value='" + strOption + "']").prop("checked", false);
});

If you're interested in why this is the case I have a more in depth response in a different thread over here: Issue Updating Form Controls with JavaScript 

(EDIT: I have updated the code to reflect your posted code, as opposed to using code from the linked example)

Thank you very much for the answer and link (and for using my code).

I've changed "attr" to "prop" in the button code - I think that is the only difference. Unfortunately it still isn't working. However I had to go with it and so am now reluctant to do too much while the form is in use!

Perhaps something is missing. Can you provide a screenshot of the portion of the form in question? 

Additionally, are you saying that when you Save the Form (without it redirecting you to the List) that any subsequent attempts to use this 'clear selection' button will not work? 

Thanks!

Here is the form - it is not efficient, but I've an untick for each choice.

Then this is the button:

Yes, once you either save and continue or save and close, the untick stops working. But before saving it is working perfectly.

Are the Choices (like, "Discussed in induction") individual Choice Controls, or is it just one Choice Control with several Options? 

If they are individual Choice Controls, is there a particular aversion to just using a Yes / No control that could be changed at any time to be either considered 'on' or 'off' (Checked / Unchecked)? 

Further, are you Button Controls set to type JavaScript? 

@KateG I'm not 100% why you're using radial buttons, but that may be difficult to do and require code. Have you thought of using checkboxes that allow for unchecking? Also you an use this as a multiple-choice column since more than one option is allowed and if you need you could have one untick option that clears them all. 

I did a mock-up of what I believe to be how your form is setup, but this might not work if I didn't guess correctly. 



In this example I'll be using (3) Choice Controls and (3) Buttons. All of the aforementioned controls will be independent, and will have their own individual Names. 

The Naming Scheme for the Choice Controls will be "myChoice_1", "myChoice_2", and "myChoice_3". Below is an example of how each control should be configured (though each should be named using one of the names above, respectively): 

The Buttons will follow a similar pattern being named "myButton_1", "myButton_2", and "myButton_3". The Button type will be JavaScript. Below is an image showing you the configuration of myButton_1: 

You may notice that the 'Client Click' portion of the Button Settings is populated with some code. 

Because you are using several individual controls, you will need to populate EACH BUTTON with a slightly different block of code so that it toggles only ONE of the Choice Controls. 

Assuming  you have named all of the Choice Controls correctly, you can copy and paste the following code snippets into the Client Click input of the corresponding Button. 

myButton_1's Client Click Code: 

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_1"));

myButton_2's Client Click Code:

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_2"));

myButton_3's Client Click Code:

(function(controlName) {
  event.preventDefault();
  NWF$("[data-controlname='" + controlName + "'] .nf-associated-control").find(":checked").prop("checked", false);
}("myChoice_3"));

The resulting Form should result in Buttons that will allow you to Uncheck the Control that you Named in the Client Click Code, and removes the need to use Event Handling: 

-----------------

All that being said, it would still probably be wise to change your fields to something like a Yes / No Control which has all of this essentially baked into the behavior of the Control. Using Radio Buttons in combo with an Untick button is not typical / expected behavior, but if there is some reason that prevents you from making the switch, the above should let you accomplish what you're trying to do without breaking anything. 

Hope you're able to get things up and running. 

Thank you so much for all this effort.

Naturally there is a bit of a story! In short, there are eight individual forms which we need combined into one overall form for approval. This is achieved by a workflow copying the data from each form each time it is saved into the overall form. For some reason which remains baffling, when we used checkboxes allowing multiple selections, these multiple selections didn't copy across, hence the change to individual radio buttons for each option which copy fine (we found that in other multiple choice questions where only one answer is acceptable, radio buttons are used and copy fine). However, this led to the problem of not being able to untick, hence the button for each option.

However the idea of a yes/no toggle sounds like a really good (and far more simple) solution to try next year!

Well it's good to hear that it might save you all some headache in the future! 

Hopefully my code solution will work for the now-time.