Uncheck a Radio Button When Clicked Again

deselecting a radio button

One of the nice features of OpenClinica is the SimpleConditionalDisplay. It'south straightforward: for instance if a user enters Yes, the Informed Consent was signed, then an item for the Consent date is shown. If the user then thinks 'that is not correct, the respond must be No' and he/she selects that, the item for Consent engagement is hidden again. And if the engagement has already been entered, then a warning is displayed, saying something like 'delight remove the Consent date.'
And then far so good, but sometimes the items that are shown using SimpleConditionalDisplay are radio-buttons. Y'all respond Yes and other items with radio-buttons are shown and y'all select them and but then you realise that the starting time answer should have been No and now you're stuck. You desire to save the CRF, but in lodge to do this you must deselect the radio-buttons, and that is not possible.

fig. ane: example of a warning

let's add together 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 lot can't wait to see it in activeness, click here 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, apply jquery-1.three.two.min.js !</script> <script lang="Javascript"> $.noConflict(); jQuery(certificate).set up(function($){  $("#undoradio1").click(function (e) {  for (i = 0; i < radioGroup1.length; i++) { radioGroup1[i].checked = false;  }  radioGroup1.change();   });  // place the grouping radio buttons  var radioGroup1 = $("#undoradio1").parent().parent().find("input"); });      </script>                  

As you tin see we first put an icon in the Right_Item_Text and for this we utilize the default 'undo'-icon of the OpenClinica interface. We requite this icon an ID, undoradio1 and we use this to make a reference to the group with the radio-buttons: var radioGroup1 = $("#undoradio1").parent().parent().find("input");.
We then define what to exercise when the undo-icon is clicked, namely: loop through all the elements of the radio-group and set them to not called: for (i = 0; i < radioGroup1.length; i++) { radioGroup1[i].checked = fake;.
As a terminal pace nosotros set the change-status of the radio-grouping, which activates the blood-red and yellow icon on the CRF that indicates there are unsaved data: radioGroup1.change();.

must I echo that for each and every radio group?

If you want to be able to deselect more than one radio-group, you tin re-create the above lawmaking and change undoradio1 to undoradio2, undoradio3, etc. but that looks messy. Thomas Kissner modified the code, then that you lot tin can brand a function of the deselecting and call that function, every time an epitome of a certain class is clicked. Sounds difficult? Look at the code. First the part in the RIGHT_ITEM_TEXT:
<img course="undoradio_for_all_img" title="Click to deselect entry" alt="Click to deselect entry" src="images/bt_Restore.gif">.
That is more or less the same as we saw before: add the epitome. But as an extra, nosotros add together a class to the image. Now we tin can use that for our function and considering we want to define that just once, we put it in the instructions part of our CRF:

          <script src="includes/jmesa/jquery.min.js">// for OC versions before 3.i.four, use jquery-1.three.2.min.js !</script> <script> $.noConflict(); jQuery(document).set up(part($) {  $("img.undoradio_for_all_img").each(office () {   $(this).click(function (due east) {    var radiogroup = $(this).parent().parent().discover("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 group

What puzzled me for a long time was: how do I use this in a RepeatingItemGroup? The problem is that you cannot place an disengage-push, or any other object for that matter, somewhere in the table that is used for the RIG. I idea. Just once more Thomas came to the rescue! He made a script that used the function .afterwards, which does more or less what information technology promises: information technology places something after an object. Together we came upwards 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().discover('tbody > tr:visible').each(part(i){       // only add together the undo epitome, if it doesn't exist       if ($(this).children('td:nth-child('+ColNo+')').observe('.undoradio').length == 0){         //if the radio's are vertical, then br-tags be, so put the disengage button subsequently the final br         if ($(this).children('td:nth-child('+ColNo+')').children('br').length != 0){           $(this).children('td:nth-child('+ColNo+')').children('br').last().afterward("<img grade='undoradio' championship='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>");          }         else{           //if the radio's are horizontal, add the undobutton subsequently the last radio-button of the group           $(this).children('td:nth-kid('+ColNo+')').children('input[blazon=radio]').last().after("<img class='undoradio' title='Click to deselect entry' alt='Click to deselect entry' src='images/bt_Restore.gif'>");          }       }     });   };   office UndoRadio(){     $("img.undoradio").each(function (){       $(this).click(part (eastward){         var groupName = $(this).parent().find('input[blazon=radio]').attr('name');         var radioGroup1 = $(this).parent().parent().find('input[name="'+groupName+'"]');         for (i = 0; i < radioGroup1.length; i++){            radioGroup1[i].checked = fake;         }         radioGroup1.change();       });     });   };    //repeat the procedure when the add-push is clicked   $('.button_search').click(function(){     Display_Undo_Buttons_In_Column(3);     Display_Undo_Buttons_In_Column(5);     Display_Undo_Buttons_In_Column(vii);     UndoRadio();   });   //and run the procedure when the doc is loaded   Display_Undo_Buttons_In_Column(3);   Display_Undo_Buttons_In_Column(five);   Display_Undo_Buttons_In_Column(7);   UndoRadio(); }); </script>                  

Nifty, isn't it?

Showtime of all a word of alert: if you re-create this code and paste it into your Twoscore you may run out of infinite, as the limit is 2000 characters. To get (just) under this, supersede all two spaces with one.

I'm sure you would similar to have some subtitles with that.
The main affair in the script is the function Display_Undo_Buttons_In_Column(ColNo) which takes every bit parameter the column-number. Beginning you loop through all the rows of the table with notice('tbody > tr:visible').each(function(i) and in each row you go to the column with index ColNo: $(this).children('td:nth-child('+ColNo+')'). And then y'all first cheque if in that location is already an undo-button, or rather: you lot check if anything of class .undoradio exists in that column. (Don't worry, we'll explicate later when this is the case.)
Now we have 2 options: the radio buttons are horizontal or vertical. If they are vertical, then each option ends with a br so we identify our disengage-button after the last one: children('br').final().after. If on the other mitt the radio's are horizontal, so we go looking for the final radio and place the disengage-button there: children('input[blazon=radio]').last().afterwards
Once nosotros have the buttons, we must tell what to do when 1 is clicked and this is done in the same fashion every bit described above, using role UndoRadio(). Or: most the same way. This fourth dimension nosotros capture the name of the radio push then uncheck all radio's with that same proper noun.

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

fig. 2: deselecting in a group

does it actually, really piece of work?

You may ask 'does it really work?' and the answer is of course: 'implement it and watch the radio-buttons in your CRF' but that is probably not what you mean. You want to know if all these activities are stored correctly. Well, let's have a wait at the audit-trail. In the side by side screenshot yous run across the trail after entering data in the CRF and then marking information technology complete.

fig. three: audit trail after initial entry

Now nosotros realize our fault and nosotros open up the CRF once again and deselect the radio-groups ii and iii. Before changing the get-go reply, we click Save and then nosotros're prompted to requite a ReasonForChange. We provide this by (manually) creating Discrepancies in the normal manner. Then nosotros change the value of the starting time question and then we click Save and we're prompted one terminal time for a ReasonForChange-Discrepancy.

fig. 4: making changes

And the audit-trail records all these activities correctly:

fig. five: inspect trail subsequently changes

Other how-to-pages tin be constitute hither.

wendtbralis55.blogspot.com

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

Share this post