Using javascript/jQuery to listen for checkboxes being checked or not

Hi w.patrick.gale ,
Thanks for sharing the code. I gave it a go, changing the ~1 to ~10 in the code as the button in my scenario was the 10th in the list that I wanted to listen to and changed the alert part to console.log(n). I was thinking that your code would help me work out the Class / ID name of a multiselect button to use but it just returns '21' in the console.

My scenario is to clear the text box associated with the 9th button when you either unslect the 9th button or select the 10th button which is set to Make Answer Exclusive. The code posted below works fine for when you click / unclick the 9th button but not the 10th button. It's because I don't have the correct syntax to reference the button properly. I was hoping that your code would help to do this. Can you help?

Thanks
Rod
-------------------------
FYI: I've spotted the change to the html element manually but can't work out how I translate that into the right syntax. The pic below shows the HTML element in question for the 10th button. When the button is ticked the class changes (I've highlighted this in the pic) from "MultipleAnswer " to "MultipleAnswer q-checked".
This is the survey question:
My own code just looks for the element that has a text box associated to it and then deletes the text in it but for the 10th button I decided that I would hard code it for simplicity. Please be aware that I've put this code together from other threads and forums. I know VBA but am very much a beginner in HTML and Javascript!
Qualtrics.SurveyEngine.addOnReady(function()
{
//using this codePlease be aware that I've put this code together from other threads and forums.  I know VBA but am very much a beginner in HTML and Javascript! to clear the text if the correspodance changes their mind and clicks a different answer
//jQuery("input[id='QR~QID130~6~TEXT']").hide(); //not required
  var rid =jQuery("input[type='text']").parent().parent().find("input[type='checkbox']").attr("id");
console.log(rid)

//if mutlichoice question checkbox is used whilst is single answer use radio
  jQuery("[type='checkbox']").change(function()
  {

    if(jQuery("[id='"+rid+"']").prop("checked") == true)
    {
      jQuery("[id*='"+rid+"~TEXT']").show();
    }
    else
    {
      jQuery("[id='"+rid+"~TEXT']").val('');
      //jQuery("[id='"+rid+"~TEXT']").hide(); //not required
    }

  });

// if Prefer not to say button is checked then need to clear the text box
jQuery("[type='checkbox']").change(function()
  {
// == See here for issue with code == <<<<<<<<<<< I don't know the syntax for the ID of the button!! >>>>>>>>>>>>>
    if(jQuery("#QID29-10-label").prop("checked") == true) //hardcoded, this is the Prefer not to say option
    {
      jQuery("[id*='"+rid+"~TEXT']").val('');
    }
    else
    {
      jQuery("[id='"+rid+"~TEXT']").show();
      //jQuery("[id='"+rid+"~TEXT']").hide(); //not required
    }

  });

// from https://www.qualtrics.com/community/discussion/5521/using-javascript-jquery-to-listen-for-checkboxes-being-checked-or-not
var that = this;
  var qid = this.questionId;
  ar objCheck = jQuery( "input[id='QR\\~"+qid+"\\~10']" ); // this is just so we can listen for changes in the checkbox selection
  var objCheckLabel = jQuery( "label[for='QR\\~"+qid+"\\~10']" );  // the 'visual' part of the checkbox that tracks if a box is checked

  var foo = function(e) {
    if (typeof e.isTrigger == 'undefined') {   
      var mV = (objCheckLabel.attr('class')); 
      var n = mV.search("q-checked"); // since the checkbox label 'class' is the only thing we can used to tell if ...
      // the checkox is selected then we need to parse the class values to look for 'q-checked'
      if (n > 0) console.log(n);  // alert if the checkbox is selected
    }
  }
  objCheck.on('change',foo); // listen for changes in the checkbox selection

});

Hey Rod_Pestell ,
The code...
var n = mV.search("q-checked");
...simply uses the built-in javascript search function, so n is nothing more than the position at which the searched value is found within the HTML element.
The thing you want to look at is the value of 'e' within the foo function (which is the selected element object). So within the foo function you could print the value of e instead of n like (e will have LOTS of properties):
if (n > 0) console.log(e); // view the e (selected element) object
Printing the 'e.target.id' property for example will give you the full element ID.
Anyway it sounds like what you want to do is check if the 'e.target.id' value is != to the ID of the checkbox with the text field, and if it is different then clear the textbox (this would be done within the foo function). Give it a shot.

Rod_Pestell My 2 cents is that you really shouldn't worry about clearing a textbox for a checkbox that isn't selected. It's likely not going to happen that someone enters text and chooses another checkbox and if they do you can simply parse it out when you are analyzing the responses.

Hi w.patrick.gale
Thanks for the replies - that's really helpful. I'm still learning about the syntaxs . It's often the little things like:
!=
that I am not sure what it means. I suspect it will be in various training apps and manuals but I guess I've just dived in!! If you've got any tips that would be most welcome.
Thanks
Rod
PS do you ever have any problems with Chrome freezing when writing on this community, especially when there is a code block?

Yeah Chrome froze on me several times yesterday writing a reply. I believe they have changed the community code recently so it seems a little buggy (of course Chrome was also trying to install updates which usually causes website problems until the update is complete). I'm still having problems with posting this reply today.

Hi w.patrick.gale ,
I'm writing a custom validation code for a 2-column MultiSelect matrix that throws a message if both checkboxes on the same row have been selected (BTW, I realize it could be done without custom code by simply making the question SingleSelect, but that's not the job!).
I thought of modifying your code in the OP and using obCheck1 ('QR\\~"+qid+"\\~1') and obCheck2 ('QR\\~"+qid+"\\~2') in the foo function by comparing a correspondingly defined n1 vs n2.
Initially, I just wanted to test your code for a normal MultiSelect question but it didn't work for me.
Any idea what may be the issue?

Hey Graeme, do you have a example survey you can share with what you are trying to do?