Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

exclusive options in the last row of a customized array question

  • LISHANGQI
  • LISHANGQI's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #233036 by LISHANGQI
Please help us help you and fill where relevant:
Your LimeSurvey version: 3.27
Own server or LimeSurvey hosting: Own
Survey theme/template: Fruity
==================
Dear all, 

I'm trying to make an array question with the exclusive radios in the last row, which means when the orange cell is selected, the green cells should be unchecked. 

I'm trying to adpot the solution of Partner by selecting only the radio in the last row as the target element,  but I cannot make it: forums.limesurvey.org/forum/can-i-do-thi...ion-in-array?start=0

Would it be possible if I can get any help or suggestion from you? I would very much appreciate it!

Thanks in advance!

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #233045 by tpartner
This script should work in your modified table.

Code:
<script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Identify the exclusive row
    var thisTable = $(':radio', thisQuestion).closest('table');
    var exclusiveRow = $('tr:last', thisTable);
    $('tr:last', thisTable).addClass('exclusive-row');
 
    // Listener on the radios
    $(':radio', thisTable).on('click', function(event){
      var thisCode = $(this).val();
      var thisRow = $(this).closest('tr');
 
      // Identify the radios to be un-checked
      var excludedInputs = $('tr.exclusive-row :radio[value="'+thisCode+'"]', thisTable);
      if($(thisRow).hasClass('exclusive-row')) {
        excludedInputs = $('tr:not(.exclusive-row) :radio[value="'+thisCode+'"]', thisTable);
      }
 
      // Un-check those radios
      $.each(excludedInputs, function(i, input) {
        if($(input).is(':checked')) {
          $(input).prop('checked', false);
          checkconditions('', $(input).attr('name'), 'radio');
          $(input).closest('td').removeClass('active-item');
        }
      });
    });
  });
</script>

Sample survey: 

File Attachment:

File Name: limesurvey...1(1).lss
File Size:28 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: LISHANGQI

Please Log in to join the conversation.

  • LISHANGQI
  • LISHANGQI's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #233079 by LISHANGQI
Thanks a lot for your generous help! It works great!

Please Log in to join the conversation.

  • LISHANGQI
  • LISHANGQI's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago - 2 years 3 months ago #233281 by LISHANGQI
Dear Mr.Parnter,

I don't want to be too demanding to volunteers, but there is a further difficulty that has taken me days to resolve, would it be possible if me to get further help from you? 

I'd like to add 3 hidden rows to this table: .pm,.ma.,.pma. And I'd like to have one of the rows shown depending on the checked radios. For example,if radios in tr. p and tr.m are checked and the radio in tr. a is unchecked, the row of .pm should be shown.
I've tried to use js IF function but it never work, let alone multiple conditions:
Code:
<script type="text/javascript" >
 
  $(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
var thisTable = $(':radio', thisQuestion).closest('table');
function showpm(){
if($(':radio', thisQuestion).is(':checked')){$(".pm").show()}
};
$(':radio', thisTable).on('click', function(event){
showpm()
});
});
</script>
I would appreciate if you could give me some help or some hints.
 
Last edit: 2 years 3 months ago by LISHANGQI.

Please Log in to join the conversation.

  • LISHANGQI
  • LISHANGQI's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 months ago #233425 by LISHANGQI
I've figured out a short script to show particular row(s) based on the radio(s) click. I'd like to share my example script here for people interested in such a design.
Code:
<script type="text/javascript">
//Hide the rows at first
$(".pre,.main,.after,.pm,.ma,.pma").hide();
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
var thisTable = $(':radio', thisQuestion).closest('table');
// Define the actions on click
  $(':radio', thisTable).on('click',function(){if(($('.precar :radio:checked', thisQuestion).length > 0)&amp;&amp;($('.maincar :radio:checked', thisQuestion).length > 0)){$(".pm").show()}else
$(".pm").hide()
});
});
</script>

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose