label for checkbox 在iphone不正常

<div class="mui-checkbox-group">
<label for="ynpz" class="mui-btn mui-btn-grey">aaaa</label>
<input id="ynpz" type="checkbox" name="items1" class="" hidden="true" />
<label for="pdqy" class="mui-btn mui-btn-grey">bbbb</label>
<input id="pdqy" type="checkbox" name="items2" class="" hidden="true" />
<label for="qsbg" class="mui-btn mui-btn-grey">cccc</label>
<input id="qsbg" type="checkbox" name="items3" class="" hidden="true" />
<label for="zcfw" class="mui-btn mui-btn-grey">dddd</label>
<input id="zcfw" type="checkbox" name="items" class="" hidden="true" />
</div>

$('.mui-checkbox-group input').each(function(index,item){
item.onclick = function() {
var checkbox = item;
var label = item;
while(label.nodeName !== 'LABEL'){
label = label.previousSibling;
}
if(checkbox.checked){
label.setAttribute('class','mui-btn mui-btn-green');
}else{
label.setAttribute('class','mui-btn mui-btn-grey');;
}
}
});

就是用label的颜色(class)来表示checkbox被选中，
这段代码在浏览器里面没问题，
下载到iphone上后，点击任何一个label，事件都是第一个label上响应。
也就是只有第一个label才能被选中。

在each的回调函数里面打印item的信息，确认每个onclick都绑定到了对应的checkbox(input)上。
但最后，不论点击那个label，调用都是第一个checkbox(input)的onclick函数。

去掉js代码，去掉checkbox(input)的hidden属性，无论点击哪个label，最后的效果都是点击在了第一个label上，只有第一个checkbox才能被勾上。

感觉像是label的for属性没有将onclick事件绑定到对应的checkbox(input)上,而是始终调用的第一个checkbox(input)的onclick函数。

最关键的问题是这段代码在浏览器，包括hbuild内置浏览器里面都是没问题。