Ok I realise this might not be a pure SharePoint question, but I have tried several "normal" solutions for this without any succesfull outcome - so I'm kinda hoping there some SharePoint "magic" going on that somebidy might know of.

In SharePoint Online I have a form which includes a chechbox. I want to know - using jquery - if the checkbox is in fact checked or not.

I very much would like to get the element by it's ID as opposed to the name/title/etc. and realising SharePoint adds a random string to the ID, I'm forced to use some form of 'begins with' (Which is fine for this purpose).

I have tried several versions of $("input[id^=" + TravelTypeId + "]") (Where 'TravelTypeId' is the starting part of the Id of the checkbox). For instance.val() and .prop("checked") does not seem to work at all returning 'undifined'. Then I tried .is(":checked") which does return a boolean, it's just always 'false'.

What am I overlooking here?

Added for clarification: The input is placed in a span element. Which is placed in a normalt table :) enter image description here

  • can you put what checkbox html is being rendered by sharepoint online.... ? also put parent container. – Siddharth Vaghasia Feb 1 '18 at 9:28
  • I have added a a picture to show it :) – Morten K Feb 1 '18 at 9:58
  • adding answer.. – Siddharth Vaghasia Feb 1 '18 at 10:42
  • how about using contains ? var travelTypeInput = $('input[id*="+ TravelTypeId +"]'); console.log($(travelTypeInput).is(':checked')) – Gautam Sheth Feb 1 '18 at 11:07
  • Using contains doesn't do it either :-S – Morten K Feb 1 '18 at 11:53

If you're willing to use a 3rd party JavaScript library, I highly suggest SPUtility.js to get and set values for columns in a form. Although the project originator is no longer supporting the project, it is highly efficient and you could fork on GitHub. Below is the documentation for getting and setting multiselect checkboxes.

// Multi-select fields are the same except you can call SetValue multiple times
// For example, to check the Alpha, Charlie, and Echo checkboxes:
var myMultiSelectField = SPUtility.GetSPField('Multiselect Column');

// for fill-in fields, simply pass a value that does not exist in the list of choices
myMultiSelectField.SetValue('Christmas'); // Christmas is not a choice so Fill-in gets set

// GetValue returns an array of strings
var values = myMultiSelectField.GetValue();
// Value = ["Alpha", "Bravo", "Charlie"]
  • Thanks - I prefer not to use a depicated library for SPO as it can change often :) – Morten K Jan 17 '19 at 7:03
  • The library is not deprecated and can be forked as much as you like. It is simply no longer maintained by the original author. – AtariPixel Jan 17 '19 at 9:00
  • Sure but then I might as well use the plain javascript/jquery if I need to maintain code anyway :) – Morten K Jan 17 '19 at 12:06
  • That's like saying, "Why use a bulldozer when I can use a shovel if I need to maintain the bulldozer anyway." The fact is, most developers use JavaScript libraries because they are more efficient and require less lines of code. But, to each their own. – AtariPixel Jan 17 '19 at 12:39
  • I agree when talking big projects, but for a small task like this one it's completely overkill... – Morten K Jan 18 '19 at 7:23

Try this:

$("input[id^=" + TravelTypeId + "]:checked")

It will return the element if checked or $("input[id^=" + TravelTypeId + "]:checked").length > 0 will return true

  • As the suggestion above this allways just returns false even if the checkbox is checked :-( – Morten K Feb 1 '18 at 8:30

As an alternative you could use:

var checkbox = $("input[id^=" + TravelTypeId + "]");
if (checkbox.checked) ...
  • This just always return false even if the checbox is checked :-( – Morten K Feb 1 '18 at 8:29
  • Are you trying by reloading everytime the page or by console? Is the checkbox inside a frame? – Sergio Feb 1 '18 at 22:00
  • Both actually - the scripts fires when the page is loaded and when a button is pressed. No iframes. But I think the issue was my lack of javascript knowledge rather than anythins else. Once I placed the script in the correct function (Even if i did declare the variable in the beginnig) it worked fine. – Morten K Feb 2 '18 at 7:54
  • You have to place JS in the correct trigger (document.ready, window.load or _spBodyOnLoadFunctionNames) OR at the end of the document – Sergio Feb 2 '18 at 9:13

What is see from your html being generated is that title is unique, so i am trying to find using input with title which is given there. I tried this in fiddle and its working...can you please check and confirm.

var FTCheckbox = $('input[title="FasterTravelTime"]');


  • Nop still not working when used in SharePoint :-S – Morten K Feb 1 '18 at 10:54
  • can you alert and check if it is able to find $(FTCheckbox).length... is it giving count 1 ? – Siddharth Vaghasia Feb 1 '18 at 10:57
  • I does not seem to find it. It return 0. – Morten K Feb 1 '18 at 10:59
  • did you check spelling of title...mine is FasterTravelTime and yours is FastestTravelTime. – Siddharth Vaghasia Feb 1 '18 at 11:02
  • Yup i did correct that. – Morten K Feb 1 '18 at 11:08

the way i do this is by searching for the id of the label (the span id always stays as what you first create your column as) then finding the parents so you can get the table row then searching that row for your checkbox that is checked and finding the length, if it isn't checked it will show 0 and if it is checked 1.

var submitBox = $('#Submit').parent().parent().find('input[type=checkbox]:checked').length;

then i just put in a if statement to decide what i want to do with it

if (submitBox > 0){
        //do your stuff

Should just need to change #Submit to the id of your label which if you havent renamed should be #FastestTravelTime

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.