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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.