How to: Selecting Multi-Select Choice Columns in Forms with jQuery

As I’ve written many times in the past, I get a lot of questions via this blog. I try to answer some of them, but often they simply come in too fast and furious for me to get to them all.

Answering the questions gives me some benefits, too, or course. First, I often learn something I didn’t know (always a good thing), and second, I often turn the question and its answer into a blog post like this.

This one came in a few weeks back and I just found it as I was cleaning out my inbox.

Your blogs, post really helpful to me. [Nice – always start a blind question with some sort of pleasant preface. Really.]

Currently I am working in a project with SharePoint Server 2013. I am using jquery/javascript for few custom operations. I have a list “Task Assignment” where I am using a choice type column with “checkboxes multiple selection” enabled named “Task Category”. I need to trigger onchange or click event when user check/uncheck any items of the choice field.

But I could not get the element by id or tag name. I have worked with radio button using below statement.

$('input:radio[name$="0b57f_$RadioButtonChoiceField"]').bind("change", reviewedChanged);

I have tried to change this to work with multiple selection choice field.

$('input:checkbox[name$="f7c37_MultiChoiceTable"]').bind("change", assignTask);

But it is not working. Can you please suggest me.

Thanks in advance. [Also nice. It’s amazing how few people ever say please or thank you.]

When I answer, I always preface my answer with something like this. (I have a signature set up in Outlook with this text because I use it so much.)

First off, thanks for turning to me with your question.  I’m happy to try to help, but you should really use a public forum to post your question. Some of the forums that can be useful are:

* SharePoint forums on MSDN (http://social.msdn.microsoft.com/Forums/sharepoint/)

* SharePoint on StackExchange (http://sharepoint.stackexchange.com)

Many people are active in these forums and you’re likely to get prompt responses. Additionally, others can benefit from finding any useful answers you get in the forums.

I was off the grid in Africa when this question came in. If it had any sort of time sensitivity, then sending it just to me wasn’t a good strategy. Plus, I may simply have never answered.

Then I get to the answer. In this case, in my SharePoint Online (2013) test environment, a multi-select checkbox renders as a set of input elements like so:

<table id="test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceTable" cellspacing="1" cellpadding="0">
  <tr>
    <td>
      <span title="a" class="ms-RadioText">
      <input id="test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceOption_0" type="checkbox">
      	<label for="test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceOption_0">a</label>
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span title="b" class="ms-RadioText">
        <input id="test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceOption_1" type="checkbox">
        <label for="test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceOption_1">b</label>
      </span>
    </td>
  </tr>
...

My column name is “test”, so we see ids like “test_2b0bc958-232c-4e77-a8b1-7b3a1745f84d_MultiChoiceOption_0”. This means the selector could be something like:

$("input[id^='test_'][id*='_MultiChoiceOption_']").change(function() {
  alert($(this).attr("id"));
});

The code above is what I used to test. I find that this syntax makes more sense from a readability perspective over using bind, but that’s more of a stylistic thing.

The selector breaks down like this:

• find input elements – $(“input
• where the id starts with “test_” – [id^=’test_’]
• and the id contains “_MultiChoiceOption_” – [id*=’_MultiChoiceOption_’]”).

The most important message here is that you can’t make any assumptions about the way ids are constructed in SharePoint because they are all over the map. You simply have to get good at using the various DOM inspectors, including the Internet Explorer Developer Toolbar and Firebug.

Keep in mind that some controls (not this one) may be rendered differently in IE than in other browsers – even in SharePoint 2013 – so you need to test your selectors in multiple browsers. Once you get familiar with how things like ids and “controls” – on the browser side, controls are collections of HTML elements and script – are rendered, you’ll feel more comfortable knowing when you’ve got it right.