June 19, 2017

Accessing Checkbox in SharePoint using JQuery

I couldn't find anything obvious for accessing SharePoint Check Box so chucked this together, hopefully useful for someone else 😉😎
Note: The below code/solution is applicable to accessing check box in a custom SharePoint List forms using SharePoint Designer. To know how to create a custom form in SharePoint Online, read this article Get Current Logged in User & Manager using REST API in SharePoint OnlineAccessing Check Box control in SharePoint is little tricky than accessing the check box in HTML. The reason being, Check Box control is rendered as a table instead of a single control as shown below (Check Box and its preview in developer tools - Chrome):
So, each check box is rendered inside SPAN tag in a table. To access the normal SharePoint controls, we will use either ID or title property but for Check Box it is little complicated.
The actual check box control is in "input" tag 2. The values (Example here: A, B) are inside "label" tag 3. But each control (Yes & No) are represented by ID which is generated by SharePoint 4. If you look at the ID, there is "ff5" which is the ID of the control generated randomly by SharePoint
Now, open the designer, add an ID to the TD of the Check Box so that we can query it easily using JSOM as shown below:
//Get the checked values of Check Box
$("input[id ^= 'tdLanguage']").is(function(){
    var checked = $(this).is(":checked"); //is checkbox checked (true/false)?
    var theVal = $(this).next().text();  //get the label for this checkbox
    alert(checked + " : " + theVal);
});
//Check if checkbox is selected or not
($("#tdLanguage").children().find('input:checkbox').is(':checked'))
//Check box checked or not - single check box type in SharePoint
$("td[id='tdLanguage'] input:checkbox[name*='ff5']").is(":checked")
//Check all the values of checkbox
$("td[id='tdLanguage'] input:checkbox[name*='ff5']").attr('checked',true )
//Uncheck /Clear all checkbox values
$("td[id='tdLanguage'] input:checkbox[name*='ff5']").attr('checked',false )
*** "'tdLanguage'" is the ID of the SharePoint Radio Button Control, "ff5" is the unique ID of the SharePoint Control in your List form. Change this ID according to your form to get the exact result.
Please share your valuable comments which will make me write more and also share this post using the below social buttons to others.
Happy Share(ing)Point! 👍

0 comments:

Post a Comment

Dear Readers, I LOVE to hear from you! Your feedback is always appreciated. I will try to reply to your query as soon as possible.

1. Make sure to click the "Notify me" check box at the right side to be notified of follow up comments and replies.
2. Please Do Not Spam - Spam comments will be deleted immediately upon review.