【发布时间】：2014-03-15 20:01:21
【问题描述】：
我正在使用 jQuery 移动开发一个网络应用程序。在一个页面中有一些手风琴，每个手风琴都由复选框列表组成。 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.以下是我正在使用的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>
jQuery Mobile Checkboxes</h1>
</div>
<div data-role="content">
<form>
<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">
<h3>
Accordian 1</h3>
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup'>
<label>
<input type='checkbox' class='selectAll' class='custom' />Select All</label>
<input id="checkbox0" name="checkbox0" type="checkbox">
<label for="checkbox0">Checkbox# 0</label>
<input id="checkbox1" name="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox# 1</label>
<input id="checkbox2" name="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox# 2</label>
<input id="checkbox3" name="checkbox3" type="checkbox">
<label for="checkbox3">Checkbox# 3</label>
<input id="checkbox4" name="checkbox4" type="checkbox">
<label for="checkbox4">Checkbox# 4</label>
<input id="checkbox5" name="checkbox5" type="checkbox">
<label for="checkbox5">Checkbox# 5</label>
<input id="checkbox6" name="checkbox6" type="checkbox">
<label for="checkbox6">Checkbox# 6</label>
<input id="checkbox7" name="checkbox7" type="checkbox">
<label for="checkbox7">Checkbox# 7</label>
<input id="checkbox8" name="checkbox8" type="checkbox">
<label for="checkbox8">Checkbox# 8</label>
<input id="checkbox9" name="checkbox9" type="checkbox">
<label for="checkbox9">Checkbox# 9</label>
<input id="checkbox10" name="checkbox10" type="checkbox">
<label for="checkbox10">Checkbox# 10</label>
<input id="checkbox11" name="checkbox11" type="checkbox">
<label for="checkbox11">Checkbox# 11</label>
</fieldset>
</div>
</div>
<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">
<h3>
Accordian 2</h3>
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup'>
<label>
<input type='checkbox' class='selectAll' class='custom' />Select All</label>
<input id="checkbox100" name="checkbox0" type="checkbox">
<label for="checkbox0">Checkbox# 0</label>
<input id="checkbox101" name="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox# 1</label>
<input id="checkbox102" name="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox# 2</label>
<input id="checkbox103" name="checkbox3" type="checkbox">
<label for="checkbox3">Checkbox# 3</label>
<input id="checkbox104" name="checkbox4" type="checkbox">
<label for="checkbox4">Checkbox# 4</label>
<input id="checkbox105" name="checkbox5" type="checkbox">
<label for="checkbox5">Checkbox# 5</label>
<input id="checkbox106" name="checkbox6" type="checkbox">
<label for="checkbox6">Checkbox# 6</label>
<input id="checkbox107" name="checkbox7" type="checkbox">
<label for="checkbox7">Checkbox# 7</label>
<input id="checkbox108" name="checkbox8" type="checkbox">
<label for="checkbox8">Checkbox# 8</label>
<input id="checkbox109" name="checkbox9" type="checkbox">
<label for="checkbox9">Checkbox# 9</label>
<input id="checkbox110" name="checkbox10" type="checkbox">
<label for="checkbox10">Checkbox# 10</label>
<input id="checkbox111" name="checkbox11" type="checkbox">
<label for="checkbox11">Checkbox# 11</label>
<input id="checkbox112" name="checkbox12" type="checkbox">
<label for="checkbox12">Checkbox# 12</label>
</fieldset>
</div>
</div>
</form>
</div>
<div data-role="footer">
<h4>
</h4>
</div>
</div>
<script>
function bindCheckBoxes() {
$("input[type='checkbox']").bind("change", function (event, ui) {
var $uiElement = $(event.target).parent();
var checkBoxParent = $uiElement.parent()[0];
if (event.target.className === 'selectAll') {
if (event.target.checked) {
$(checkBoxParent).find('.selectAll').attr("checkedCount", $(checkBoxParent).find("input[type = 'checkbox']").length - 1);
$(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
$(element).prop('checked', true).checkboxradio('refresh');
});
} else {
$(checkBoxParent).find("input[type = 'checkbox']").each(function (index, element) {
$(element).prop('checked', false).checkboxradio('refresh');
});
$(checkBoxParent).find('.selectAll').attr("checkedCount", 0);
}
} else {
if (event.target.checked) {
var checkBoxesCount = $(checkBoxParent).find("input[type = 'checkbox']").length;
if ($(checkBoxParent).find('.selectAll').attr("checkedCount") + "" == "undefined") {
$(checkBoxParent).find('.selectAll').attr("checkedCount", 1);
} else {
temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
$(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) + 1);
checkedCount = $(checkBoxParent).find('.selectAll').attr("checkedCount");
console.log("checkedCount:" + checkedCount);
if (checkedCount == checkBoxesCount - 1) {
$(checkBoxParent).find('.selectAll').prop('checked', true).checkboxradio('refresh');
}
}
} else {
if ($(checkBoxParent).find('.selectAll').isChecked) {} else {
temp = $(checkBoxParent).find('.selectAll').attr("checkedCount");
$(checkBoxParent).find('.selectAll').attr("checkedCount", Number(temp) - 1);
$(checkBoxParent).find('.selectAll').prop('checked', false).checkboxradio('refresh');
}
}
}
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
});
}
$(document).on('pageinit', function () {
bindCheckBoxes();
});
</script>
</body>
</html>
这需要托管在共享点环境中。当通过 android 或 chrome 或 mozilla firefox 访问该站点时，性能很好。但是当通过带有 iOS 7.0.4 的 iPhone 5 访问时，性能很差。单击复选框时，需要 5 秒以上才能反映 UI 中的更改。复选框和手风琴是动态生成的。复选框的数量越多，性能越差。
请帮助提高性能。提前致谢。
【问题讨论】：
-
我刚刚测试了iPhone 5上提供的代码，性能还不错。不管怎样，你的代码太复杂了，你只需要几行就行了，检查这个jsfiddle.net/Palestinian/q89t2
标签： javascript html ios jquery-mobile