jQuery Mobile Check box performance in iOS

jQuery Mobile Check box performance in iOS

Hi,
I am developing a web app using jQuery mobile. In a page there are some accordions and each accordian consists of list of check boxes. The first check box is a "select all" check box which when selected all the check box in the corresponding accordion are to be selected and if unselected all the check boxes to be unselected. The following is the sample code that I am using:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
  7.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  8.     <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10. </head>
  11. <body>
  12. <div data-role="page" data-theme="a">
  13.     <div data-role="header">
  14.          <h1>
  15.                 jQuery Mobile Checkboxes</h1>
  16.     </div>
  17.     <div data-role="content">
  18.         <form>
  19.             <div data-role='collapsible' data-iconpos='right' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' data-corners='false' data-theme='c' data-content-theme='d' id="acc1">
  20.                  <h3>
  21.                     Accordian 1</h3>
  22.                 <div data-role='fieldcontain'>
  23.                     <fieldset data-role='controlgroup'>
  24.                         <label>
  25.                             <input type='checkbox' class='selectAll' class='custom' />Select All</label>
  26.                         <input id="checkbox0" name="checkbox0" type="checkbox">
  27.                         <label for="checkbox0">Checkbox# 0</label>
  28.                         <input id="checkbox1" name="checkbox1" type="checkbox">
  29.                         <label for="checkbox1">Checkbox# 1</label>
  30.                         <input id="checkbox2" name="checkbox2" type="checkbox">
  31.                         <label for="checkbox2">Checkbox# 2</label>
  32.                         <input id="checkbox3" name="checkbox3" type="checkbox">
  33.                         <label for="checkbox3">Checkbox# 3</label>
  34.                         <input id="checkbox4" name="checkbox4" type="checkbox">
  35.                         <label for="checkbox4">Checkbox# 4</label>
  36.                         <input id="checkbox5" name="checkbox5" type="checkbox">
  37.                         <label for="checkbox5">Checkbox# 5</label>
  38.                         <input id="checkbox6" name="checkbox6" type="checkbox">
  39.                         <label for="checkbox6">Checkbox# 6</label>
  40.                         <input id="checkbox7" name="checkbox7" type="checkbox">
  41.                         <label for="checkbox7">Checkbox# 7</label>
  42.                         <input id="checkbox8" name="checkbox8" type="checkbox">
  43.                         <label for="checkbox8">Checkbox# 8</label>
  44.                         <input id="checkbox9" name="checkbox9" type="checkbox">
  45.                         <label for="checkbox9">Checkbox# 9</label>
  46.                         <input id="checkbox10" name="checkbox10" type="checkbox">
  47.                         <label for="checkbox10">Checkbox# 10</label>
  48.                         <input id="checkbox11" name="checkbox11" type="checkbox">
  49.                         <label for="checkbox11">Checkbox# 11</label>
  50.                     </fieldset>
  51.                 </div>
  52.             </div>
  53.             <div data-role='collapsible' data-iconpos='right' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' data-corners='false' data-theme='c' data-content-theme='d' id="acc2">
  54.                  <h3>
  55.                     Accordian 2</h3>
  56.                 <div data-role='fieldcontain'>
  57.                     <fieldset data-role='controlgroup'>
  58.                         <label>
  59.                             <input type='checkbox' class='selectAll' class='custom' />Select All</label>
  60.                         <input id="checkbox100" name="checkbox0" type="checkbox">
  61.                         <label for="checkbox0">Checkbox# 0</label>
  62.                         <input id="checkbox101" name="checkbox1" type="checkbox">
  63.                         <label for="checkbox1">Checkbox# 1</label>
  64.                         <input id="checkbox102" name="checkbox2" type="checkbox">
  65.                         <label for="checkbox2">Checkbox# 2</label>
  66.                         <input id="checkbox103" name="checkbox3" type="checkbox">
  67.                         <label for="checkbox3">Checkbox# 3</label>
  68.                         <input id="checkbox104" name="checkbox4" type="checkbox">
  69.                         <label for="checkbox4">Checkbox# 4</label>
  70.                         <input id="checkbox105" name="checkbox5" type="checkbox">
  71.                         <label for="checkbox5">Checkbox# 5</label>
  72.                         <input id="checkbox106" name="checkbox6" type="checkbox">
  73.                         <label for="checkbox6">Checkbox# 6</label>
  74.                         <input id="checkbox107" name="checkbox7" type="checkbox">
  75.                         <label for="checkbox7">Checkbox# 7</label>
  76.                         <input id="checkbox108" name="checkbox8" type="checkbox">
  77.                         <label for="checkbox8">Checkbox# 8</label>
  78.                         <input id="checkbox109" name="checkbox9" type="checkbox">
  79.                         <label for="checkbox9">Checkbox# 9</label>
  80.                         <input id="checkbox110" name="checkbox10" type="checkbox">
  81.                         <label for="checkbox10">Checkbox# 10</label>
  82.                         <input id="checkbox111" name="checkbox11" type="checkbox">
  83.                         <label for="checkbox11">Checkbox# 11</label>
  84.                         <input id="checkbox112" name="checkbox12" type="checkbox">
  85.                         <label for="checkbox12">Checkbox# 12</label>
  86.                     </fieldset>
  87.                 </div>
  88.             </div>
  89.         </form>
  90.     </div>
  91.     <div data-role="footer">
  92.          <h4>
  93.             </h4>
  94.     </div>
  95. </div>
  96. <script>
  97. function bindCheckBoxes() {
  98.     $("input[type='checkbox']").bind("change", function (event, ui) {
  99.         var $uiElement = $(event.target).parent();
  100.         var checkBoxParent = $uiElement.parent()[0];
  101.         if (event.target.className === 'selectAll') {
  102.             if (event.target.checked) {
  103.                 $(checkBoxParent).find('.selectAll').attr("checkedCount", $(checkBoxParent).find("input[type = 'checkbox']").length - 1);
  104.                 $(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
  105.                     $(element).prop('checked', true).checkboxradio('refresh');
  106.                 });
  107.             } else {
  108.                 $(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
  109.                     $(element).prop('checked', false).checkboxradio('refresh');
  110.                 });
  111.                 $(checkBoxParent).find('.selectAll').attr("checkedCount", 0);
  112.             }
  113.         } else {
  114.             if (event.target.checked) {
  115.                 var checkBoxesCount = $(checkBoxParent).find("input[type = 'checkbox']").length;
  116.                 if ($(checkBoxParent).find('.selectAll').attr("checkedCount") + "" == "undefined") {
  117.                     $(checkBoxParent).find('.selectAll').attr("checkedCount", 1);
  118.                 } else {
  119.                     temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
  120.                     $(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) + 1);
  121.                     checkedCount = $(checkBoxParent).find('.selectAll').attr("checkedCount");
  122.                     console.log("checkedCount:" + checkedCount);
  123.                     if (checkedCount == checkBoxesCount - 1) {
  124.                         $(checkBoxParent).find('.selectAll').prop('checked', true).checkboxradio('refresh');
  125.                     }
  126.                 }
  127.             } else {
  128.                 if ($(checkBoxParent).find('.selectAll').isChecked) {} else {
  129.                     temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
  130.                     $(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) - 1);
  131.                     $(checkBoxParent).find('.selectAll').prop('checked', false).checkboxradio('refresh');
  132.                 }
  133.             }
  134.         }
  135.         event.stopPropagation();
  136.         event.preventDefault();
  137.         event.stopImmediatePropagation();
  138.     });
  139. }
  140. $(document).on('pageinit', function () {
  141.     bindCheckBoxes();
  142. });
  143. </script>
  144. </body>
  145. </html>
This needs to be hosted on share point environment. When the site is accessed through android or chrome or mozilla firefox the performance is fine. But when accessed through iPhone 5 with iOS 7.0.4 the performance is very poor. When a check box is clicked it is taking more than 5 secs to reflect the change in UI. The check boxes and the accordions are generated dynamically. The more the number of check boxes the poorer the performance.

Please help to improve the performance. Thanks in advance