JQuery to Deselect All Multiple Check Box Values

Problem

I have a multi select check box column in SharePoint list and based on some condition I have to deselect all the options selected.

Note: I am customizing the Out of the box SPD designer forms to add and edit items.

Solution

To achieve the above functionality, add an input tag under the SharePoint multi select check box tags like below

<SharePoint:FormField runat=”server” id=”ff10{$Pos}” ControlMode=”New” FieldName=”Wiki_x0020_Group” __designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff10′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@Wiki_x0020_Group’)}”/>

<SharePoint:FieldDescription runat=”server” id=”ff10description{$Pos}” FieldName=”Wiki_x0020_Group” ControlMode=”New”/>

<input id=”hdnWikiGroup” type=”hidden” value=”ff10{$Pos}” />

Here, we have to set the id value of the SharePoint:FormField tag (that is  ff10{$Pos}) to the value attribute of the input tag.

If we do not have this settings our JQuery function will deselect all the check boxes in the entire form instead of the check box where we are trying to deselect.

Finally place following script in your Java Script wherever you want to deselect options selected by user in the multi select check box column.

var wgId = $(“#hdnWikiGroup”).val();
var cbid=$(‘input[type=checkbox]’).attr(“id”);
if(cbid.indexOf(wgId)>0)
$(‘input[type=checkbox]’).removeAttr(‘checked’);

Note:When you use this script, give the reference to the following JQuery file

http://code.jquery.com/jquery-latest.js

That’s it you are done.

Thank you Gowri who helped me to solve this problem.

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: