jquery仿hotmail全选
function checkAll() {
$.fn.check = function(mode) {
var t = $(this);
mode = mode || 'on';
t.click(function(){
var isAllCheck = $(this).prop('checked');
var allInput = $(this).parent().parent().siblings('.tabsOpt').find('input');
return allInput.each(function(){
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
if(isAllCheck) {
if(this.checked === false) {
this.checked = true;
}
}else {
if(this.checked === true)
this.checked = !this.checked;
}
break;
}
});
});
};
$('.selAll').check('toggle');
}
<div class="tabsCons tab1-con">
<ul class="tabsTitle">
<!--checkbox-->
<li class="cb">
<input class="selAll" type="checkbox" name="selAll">
</li>
<!--label name-->
<li class="ln">标签名称</li>
<!--range filter-->
<li class="rf">范围筛选</li>
</ul>
<div class="tabsOpt">
<!--性别-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">性别</li>
<li class="rf">
<select name="sex">
<option value="0">不限</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</li>
</ul>
<!--年龄-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">年龄</li>
<li class="rf">
<select name="age">
<option value="0">不限</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</li>
</ul>
<!--婚姻与否-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">婚姻与否</li>
<li class="rf">
<select name="Marriage">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
<!--生育与否-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">生育与否</li>
<li class="rf">
<select name="birth">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
<!--年收入水平-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">年收入水平</li>
<li class="rf">
<select name="income">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
<!--地区标签-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">地区标签</li>
<li class="rf">
<select name="area">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
<!--兴趣爱好-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">兴趣爱好</li>
<li class="rf">
<select name="hobby">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
<!--城市级别-->
<ul class="tabsOptInner">
<li class="cb"><input type="checkbox" name="s性别ex"></li>
<li class="ln">城市级别</li>
<li class="rf">
<select name="cityLevel">
<option value="0">不限</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
</li>
</ul>
</div>

浙公网安备 33010602011771号