Uncheck a Radio Button When Clicked Again

deselecting a radio button

One of the squeamish features of OpenClinica is the SimpleConditionalDisplay. It's straightforward: for example if a user enters Aye, the Informed Consent was signed, and then an item for the Consent date is shown. If the user then thinks 'that is non correct, the respond must exist No' and he/she selects that, the item for Consent appointment is subconscious once again. And if the date has already been entered, then a warning is displayed, saying something like 'please remove the Consent engagement.'
So far and then good, but sometimes the items that are shown using SimpleConditionalDisplay are radio-buttons. Y'all answer Yep and other items with radio-buttons are shown and you select them and merely then yous realise that the get-go reply should have been No and now you lot're stuck. You want to save the CRF, just in gild to exercise this you must deselect the radio-buttons, and that is not possible.

fig. 1: example of a warning

permit'south add some script

In order to do this, we must add some java-script to our CRF, in the Right_Item_Text of the item with the radio-buttons. Below is the script plus an explanation of the workings, but if you can't expect to see information technology in activity, click hither for the XL-file.

                      <img id="undoradio1" src="images/bt_Restore.gif"> <script src="includes/jmesa/jquery.min.js">// for OC versions before 3.1.4, use jquery-1.three.2.min.js !</script> <script lang="Javascript"> $.noConflict(); jQuery(document).prepare(function($){  $("#undoradio1").click(office (east) {  for (i = 0; i < radioGroup1.length; i++) { radioGroup1[i].checked = false;  }  radioGroup1.alter();   });  // identify the group radio buttons  var radioGroup1 = $("#undoradio1").parent().parent().observe("input"); });      </script>                  

Every bit y'all can meet we first put an icon in the Right_Item_Text and for this nosotros use the default 'undo'-icon of the OpenClinica interface. We give this icon an ID, undoradio1 and we apply this to make a reference to the group with the radio-buttons: var radioGroup1 = $("#undoradio1").parent().parent().find("input");.
We so ascertain what to do when the undo-icon is clicked, namely: loop through all the elements of the radio-grouping and set them to not chosen: for (i = 0; i < radioGroup1.length; i++) { radioGroup1[i].checked = simulated;.
As a last pace we set the change-status of the radio-group, which activates the red and xanthous icon on the CRF that indicates there are unsaved data: radioGroup1.change();.

must I repeat that for each and every radio group?

If you lot desire to be able to deselect more than i radio-group, you lot can re-create the above code and change undoradio1 to undoradio2, undoradio3, etc. but that looks messy. Thomas Kissner modified the lawmaking, so that you tin can make a function of the deselecting and phone call that function, every time an epitome of a certain form is clicked. Sounds difficult? Expect at the code. Showtime the part in the RIGHT_ITEM_TEXT:
<img class="undoradio_for_all_img" title="Click to deselect entry" alt="Click to deselect entry" src="images/bt_Restore.gif">.
That is more than or less the same as nosotros saw before: add the epitome. But as an extra, nosotros add a class to the image. At present nosotros tin can utilize that for our role and because we want to define that merely in one case, we put information technology in the instructions part of our CRF:

          <script src="includes/jmesa/jquery.min.js">// for OC versions earlier iii.1.iv, utilize jquery-1.iii.2.min.js !</script> <script> $.noConflict(); jQuery(document).prepare(function($) {  $("img.undoradio_for_all_img").each(office () {   $(this).click(role (due east) {    var radiogroup = $(this).parent().parent().notice("input");    for (i = 0; i < radiogroup.length; i++) {      radiogroup[i].checked = false;    }   });   });  }); </script>        

Many cheers, Thomas Kissner.

but I need this in a repeating item grouping

What puzzled me for a long time was: how do I employ this in a RepeatingItemGroup? The problem is that you cannot place an undo-push, or whatsoever other object for that matter, somewhere in the table that is used for the RIG. I thought. But once again Thomas came to the rescue! He made a script that used the function .after, which does more than or less what it promises: information technology places something after an object. Together we came upward with the following:

                      <div id="UndoRadio_Col"></div> <script type="text/JavaScript" language="JavaScript" src="includes/jmesa/jquery.min.js"></script> <script> $.noConflict(); jQuery(document).fix(role($){   function Display_Undo_Buttons_In_Column(ColNo){     $('#UndoRadio_Col').parent().parent().parent().parent().find('tbody > tr:visible').each(function(i){       // only add the undo image, if information technology doesn't exist       if ($(this).children('td:nth-child('+ColNo+')').find('.undoradio').length == 0){         //if the radio's are vertical, then br-tags exist, so put the disengage button later on the last br         if ($(this).children('td:nth-child('+ColNo+')').children('br').length != 0){           $(this).children('td:nth-kid('+ColNo+')').children('br').last().afterward("<img class='undoradio' championship='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>");          }         else{           //if the radio's are horizontal, add together the undobutton after the last radio-push of the group           $(this).children('td:nth-kid('+ColNo+')').children('input[type=radio]').last().later on("<img course='undoradio' championship='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>");          }       }     });   };   function UndoRadio(){     $("img.undoradio").each(office (){       $(this).click(function (e){         var groupName = $(this).parent().find('input[type=radio]').attr('name');         var radioGroup1 = $(this).parent().parent().detect('input[name="'+groupName+'"]');         for (i = 0; i < radioGroup1.length; i++){            radioGroup1[i].checked = faux;         }         radioGroup1.change();       });     });   };    //repeat the process when the add-button is clicked   $('.button_search').click(office(){     Display_Undo_Buttons_In_Column(3);     Display_Undo_Buttons_In_Column(5);     Display_Undo_Buttons_In_Column(7);     UndoRadio();   });   //and run the process when the dr. is loaded   Display_Undo_Buttons_In_Column(3);   Display_Undo_Buttons_In_Column(5);   Display_Undo_Buttons_In_Column(7);   UndoRadio(); }); </script>                  

Neat, isn't it?

Showtime of all a give-and-take of alarm: if you copy this code and paste it into your Xl you may run out of space, every bit the limit is 2000 characters. To get (just) under this, supplant all ii spaces with 1.

I'm sure you would like to have some subtitles with that.
The main thing in the script is the office Display_Undo_Buttons_In_Column(ColNo) which takes as parameter the column-number. Starting time you loop through all the rows of the table with detect('tbody > tr:visible').each(function(i) and in each row you go to the cavalcade with alphabetize ColNo: $(this).children('td:nth-child('+ColNo+')'). Then you first check if there is already an undo-button, or rather: you bank check if annihilation of grade .undoradio exists in that column. (Don't worry, we'll explicate later when this is the example.)
At present nosotros accept two options: the radio buttons are horizontal or vertical. If they are vertical, then each option ends with a br then we identify our undo-button subsequently the final 1: children('br').final().after. If on the other hand the radio's are horizontal, and so we go looking for the final radio and identify the undo-button there: children('input[blazon=radio]').final().after
Once we have the buttons, we must tell what to do when 1 is clicked and this is done in the same way as described higher up, using part UndoRadio(). Or: nigh the same style. This fourth dimension nosotros capture the proper noun of the radio push and then uncheck all radio'south with that same proper name.

Of class in most cases we do non know how many rows at that place volition exist, because of the Add-push button. The click-event of this push button already has script assigned to it, but fortunately this button also has a class, .button_search, so what we in fact do is say: everytime an object of form .button_search is clicked, then please add undo-buttons. And that is the reason why we had to check first if there was already an disengage-push.

fig. ii: deselecting in a grouping

does it really, really work?

Y'all may ask 'does it really piece of work?' and the answer is of course: 'implement it and picket the radio-buttons in your CRF' but that is probably non what you mean. Y'all want to know if all these activities are stored correctly. Well, let's have a expect at the audit-trail. In the next screenshot you see the trail after entering data in the CRF and so marking it complete.

fig. three: inspect trail afterwards initial entry

Now nosotros realize our mistake and we open the CRF again and deselect the radio-groups 2 and iii. Before irresolute the get-go answer, we click Save and then we're prompted to give a ReasonForChange. We provide this past (manually) creating Discrepancies in the normal style. So we change the value of the first question and then we click Save and nosotros're prompted i concluding time for a ReasonForChange-Discrepancy.

fig. 4: making changes

And the audit-trail records all these activities correctly:

fig. 5: audit trail after changes

Other how-to-pages tin be found here.

hesterhavern.blogspot.com

Source: http://www.trialdatasolutions.com/tds/howto/deselectradio.jsp

Share this post