Select All check-boxes in choice field on document library form using jquery

Question

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".

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?

Answer 1

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/

Answer 2

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/