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

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

5 Answers 5

Reset to default
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"]
Improve this answer
5
  • Thanks - I prefer not to use a depicated library for SPO as it can change often :) Commented 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. Commented 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 :) Commented 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. Commented Jan 17, 2019 at 12:39
  • I agree when talking big projects, but for a small task like this one it's completely overkill... Commented 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

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

As an alternative you could use:

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

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.