JQuery 之 CheckBox

时间：2011-05-13 来源：MITB、逸

星期一星期二星期三星期四星期五星期六星期日全选
HTML代码：

<form>
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckMon' value='Monday'> 星期一
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckTues' value='Tuesday'> 星期二
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckWed' value='Wednesday'> 星期三
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckThur' value='Thursday'> 星期四
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckFri' value='Friday'> 星期五
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckSat' value='Saturday'> 星期六
<input name='ckWeek' type='checkbox' onclick='IsSelectAll()' id='ckSun' value='Sunday'> 星期日
<input name='ckAll' type='checkbox' id='ckAll' onclick='CheckAll(this)' value='CkAll'>全选
<br/>
<input id="txtCk" type="text" />
<input name="btnGet" type="button" onclick="Get();" value="提交" />
</form>

判断是否选中：

方法一：
if ($("#ckWed").get(0).checked) {
}

方法二：
if($("#ckWed").is(":checked")) {
}

方法三：
if ($("#ckWed").attr("checked")) {
}

获取选中值：

获取选中的Jquery对象：$("input[name='ckWeek']:checked");

$("input[name='ckWeek']:checked").val()只会获得第一个选中的值。

如果想获取第几个可以使用get：$("input[name='ckWeek']:checked").get(i).value;

如果要想获取更多选中的值就要用到循环：for、each

each:
$("input[name='ckWeek']:checked").each(function(){                                                                                        
alert($(this).val()); 
});
for:
var ck=$("input[name='ckWeek']:checked")
for(var i=0;i<ck.length;i++){
         if(ck[i].checked){
         alert(ck[i].value);
       }
 }

全选和全不选：可以点击文章开头的全选复选框试验

传人全选复选框的document对象，用于判断全选或者全不选。当Checked的时候就是全选，反之为全不选。

function CheckAll(ck) {
var ckAll = $("input[name='ckWeek']");
   for (var i = 0; i < ckAll.length; i++) {
       if (ckAll[i].type == "checkbox") {
           ckAll[i].checked = ck.checked;
       }
   }
}

相关阅读更多 +