Html：
<table>
<tr><th class="w1">党内职务</th><td colspan="3" class="dangneizhiwu"><input id="txt_dangneizhiwu" class="form-control input-lg" type="text" placeholder="" disabled onclick="dangneizhiwuEvent(event)">
<div class="dangneizhiwuBox none" id="dangneizhiwuBox">
<ul>
<li class="noSub"><label><input type="radio" name="dangneizhiwu" id="dangneizhiwu1" value="01">党员</label></li>
<li class="noSub"><label><input type="radio" name="dangneizhiwu" id="dangneizhiwu2" value="02">党支部书记</label></li>
<li class="noSub"><label><input type="radio" name="dangneizhiwu" id="dangneizhiwu3" value="03">党支部副书记</label></li>
<li class="hasSub">
<label class="has">党支委员</label>
<ul class="subUL">
<li><label><input type="checkbox" value="04">组织委员</label></li>
<li><label><input type="checkbox" value="05">宣传委员</label></li>
<li><label><input type="checkbox" value="06">纪律委员</label></li>
<li><label><input type="checkbox" value="07">保密委员</label></li>
<li><label><input type="checkbox" value="08">青年委员</label></li>
<li><label><input type="checkbox" value="09">统战委员</label></li>
<li><label><input type="checkbox" value="10">妇女委员</label></li>
</ul>
</li>
</ul>
</div>
<input type="hidden" id="dangneizhiwuValue" value="" />
</td></tr>
</table>
Js：
function dangneizhiwuEvent(event) {
var $txt_dangneizhiwu = $("#txt_dangneizhiwu");
var $dangneizhiwuValue = $("#dangneizhiwuValue");
var $dangneizhiwuBox = $("#dangneizhiwuBox");
var $radio = $dangneizhiwuBox.find("li.noSub").find("input");
var $checkbox = $dangneizhiwuBox.find("ul.subUL").find("input");
event.stopPropagation();
$dangneizhiwuBox.toggleClass("none");
//初始化
var ary = $txt_dangneizhiwu.val().split(",");
var ary2 = $dangneizhiwuValue.val().split(",");
var len = ary.length;
var len2 = $dangneizhiwuBox.find("input").length;
if (ary[0] == "") {
ary.splice(0, 1);
ary2.splice(0, 1);
}
for (var i = 0; i < len; i++) {
for (var j = 0; j < len; j++) {
if (ary[i] == $dangneizhiwuBox.find("input").eq(j)) {
$dangneizhiwuBox.find("input").eq(j).attr("checked", "checked");
}
}
}
//单选
$radio.off("click").click(function () {
var $this = $(this);
var name = $.trim($this.parent().text());
var val = $this.val();
$checkbox.removeAttr("checked");
ary=[name];
ary2=[val];
$txt_dangneizhiwu.val(ary);
$dangneizhiwuValue.val(ary2);
});
//多选
$checkbox.off("click").click(function () {
var $this = $(this);
var name = $.trim($this.parent().text());
var val = $this.val();
$radio.removeAttr("checked");
if ($this.is(':checked')) {//勾选
//计算勾选个数，点击的时候已算一个勾选数，所以下边if checkLen=1
checkItem = [];
for (k in $checkbox) {
if ($checkbox[k].checked)
checkItem.push($checkbox[k].value);
}
checkLen = checkItem.length;
if (checkLen == 1) {//勾选个数为1时
ary = [name];
ary2 = [val];
} else {
ary.push(name);
ary2.push(val);
}
if (ary.length > 2) {
layer.msg("勾选不能超过两项");
ary.pop();
ary2.pop();
$this.removeAttr("checked");
}
} else {//取消勾选
ary.splice($.inArray(name, ary), 1);
ary2.splice($.inArray(val, ary2), 1);
}
$txt_dangneizhiwu.val(ary);
$dangneizhiwuValue.val(ary2);
});
$(document).click(function () {
$dangneizhiwuBox.addClass("none");
});
$dangneizhiwuBox.click(function (event) {
event.stopPropagation();
});
}
HTML：
<th>党员类别</th><td class="tanchu"><input type="text" class="form-control" id="partyMembersCategory" readonly placeholder="">
<div class="tanchuBox none" id="partyMembersCategoryBox">
<ul class="clearfix">
<li class="all"><label><input type="checkbox" value="00">全选/反选</label></li>
<li><label><input type="checkbox" value="01">正式党员</label></li>
<li><label><input type="checkbox" value="02">预备党员</label></li>
<li><label><input type="checkbox" value="03">已开除党籍</label></li>
</ul>
</div>
<input type="hidden" id="partyMembersCategoryValue" value="" />
</td>
JS：
function popPartyMembersCategory(){
var $input=$("#partyMembersCategory");
var $box=$("#partyMembersCategoryBox");
var $value=$("#partyMembersCategoryValue");
var $all=$box.children("ul").find("li.all").find("input");
var $checkbox=$box.find("li.all").siblings().find("input");
var checkboxLen=$checkbox.length;
var ary=[];
var ary2=[];
if (ary[0] == "") {
ary.splice(0, 1);
ary2.splice(0, 1);
}
$input.click(function(event){
$box.toggleClass("none");
event.stopPropagation();
});
//单选
$checkbox.click(function(){
var $this = $(this);
var name = $.trim($this.parent().text());
var val = $this.val();
if ($this.is(':checked')) {//勾选
ary.push(name);
ary2.push(val);
//如勾完所有CheckBox，自动勾选全选
checkedItem = [];
for (k in $checkbox) {
if ($checkbox[k].checked)
checkedItem.push($checkbox[k].value);
}
checkedLen = checkedItem.length;
if(checkedLen==checkboxLen){
if(!$all.is(':checked')){
$all.prop("checked",true);
}
}
} else {//取消勾选
ary.splice($.inArray(name, ary), 1);
ary2.splice($.inArray(val, ary2), 1);
//取消全选
if($all.is(':checked')){
$all.prop("checked",false);
}
}
$input.val(ary);
$value.val(ary2);
});
//全选
$all.click(function(){
var $this=$(this);
ary=[];
ary2=[];
if ($this.is(':checked')) {
$checkbox.prop("checked",true);
for(k in $checkbox){
if($checkbox[k].checked){
ary.push($checkbox.eq(k).parent().text());
ary2.push($checkbox.eq(k).val());
}
}
}else{
$checkbox.prop("checked",false);
}
$input.val(ary);
$value.val(ary2);
});
$(document).click(function(){
$box.addClass("none");
});
$box.click(function(event){
event.stopPropagation();
});
}
popPartyMembersCategory();