4

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

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

5 Answers 5

1

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');
myMultiSelectField.SetValue('Alpha');
myMultiSelectField.SetValue('Charlie');
myMultiSelectField.SetValue('Echo');

// 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"]
5
  • Thanks - I prefer not to use a depicated library for SPO as it can change often :)
    – Morten K
    Jan 17, 2019 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, 2019 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, 2019 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, 2019 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, 2019 at 7:23
0

Try this:

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

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

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

As an alternative you could use:

var checkbox = $("input[id^=" + TravelTypeId + "]");
if (checkbox.checked) ...
4
  • This just always return false even if the checbox is checked :-(
    – Morten K
    Feb 1, 2018 at 8:29
  • Are you trying by reloading everytime the page or by console? Is the checkbox inside a frame?
    – Sergio
    Feb 1, 2018 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, 2018 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, 2018 at 9:13
0

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"]');
alert($(FTCheckbox).is(':checked'));

https://jsfiddle.net/b6BMK/231/

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

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 and acknowledge you have read our privacy policy.

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