radio和checkbox的js勾选使用

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();