6

I have a document library form on which there are two multiple choice fields as shown in below image. Now when user select the option "Select All" in "Vertical" field all check-boxes in "Vertical" field should get selected. Similarly this should happen for field "Horizontal".

enter image description here

I am done this in SharePoint 2010 with Javascript using ID of the "Select All" checkbox but unable to do the same is SharePoint 2013.

When I check the view source it shows different markup in 2013. In 2010 for each option proper html markup use to come, but in SharePoint 2013 it is coming as below

<tr>
        <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">
        <nobr>Vertical</nobr>
    </h3></td>
        <td valign="top" width="350px" class="ms-formbody">
        <!-- FieldName="Vertical"
             FieldInternalName="Vertical"
             FieldType="SPFieldMultiChoice"
          -->
            <span id='WPQ2fa6194eb-48e1-484e-9b45-3199ab288811Vertical' data-sp-control='SPFieldMultiChoice' data-sp-options='{&quot;mode&quot;:2,&quot;source&quot;:&quot;Vertical&quot;}'></span>             


        </td>
    </tr>

How to achive this using jquery or javascript?

2 Answers 2

6

Either you gotta find ID/title/text of Select All like shown below, and attach click event using jQuery

  $(".ms-RadioText[title='Select All'] :checkbox").click

Here is working example: https://jsfiddle.net/ybyjh1tw/

0
1

When manually selecting all except Select All check box, Select All Check box should also get checked. Updating code.

<ul class="chk-container">
<li>
    <input class="checkbox1" type="checkbox" id="selectall"/>Select All</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item1">This is Item 1</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item2">This is Item 2</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item3">This is Item 3</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item4">This is Item 4</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item5">This is Item 5</li>
<li>
    <input class="checkbox1" type="checkbox" name="check[]" value="item6">This is Item 6</li>

$(document).ready(function () {


$("#selectall").click(function()
    {
        $('.checkbox1').prop('checked',this.checked);
    });


    $(".checkbox1").click(function()
        {
            if($(".checkbox1:checked").length == $(".checkbox1").length-1)
            {
                if($(".checkbox1:checked").get(0).id =='selectall')
                {
                    $("#selectall").removeAttr("checked");
                }
                else{$("#selectall").prop("checked","checked");}
            }
        });});

https://jsfiddle.net/ybyjh1tw/7/

Your Answer

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

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