jquery checkbox常用方法

来源：互联网发布：云计算100强编辑：程序博客网时间：2024/04/19 12:48

HTML如下：

<body><form id="myform">你喜欢的水果：<br /><input type="checkbox" value="selectAll" onclick="selectAll(this);">全选<br /><input type="checkbox" name="fruit" value="apple" />苹果<br /><input type="checkbox" name="fruit" value="banana" />香蕉<br /><input type="checkbox" name="fruit" value="watermelon" />西瓜</form><button class="btn1" onclick="getYourSelect();">提交</button></body>

展现的效果如下：

1、全选框的实现，全选框选中时底下勾选框都被选中，全选框取消勾选时，底下勾选框全部取消勾选,jquery代码实现如下：

function selectAll(e){    if (e.checked==true) {        $("#myform").find("input[name='fruit']").prop("checked", true);    }else {        $("#myform").find("input[name='fruit']").prop("checked", false);    }}

2、获取当前选中的checkbox的value值，jquery代码实现如下：

function getYourSelect(){var result="";$("#myform").find("input[name='fruit']:checked").each(function(name,value){result+= $(value).val()+",";});result=result.substring(0,result.length-1);alert(result);}

3、注意点：

function selectAll(e){    if (e.checked==true) {        $("#myform").find("input[name='fruit']").attr("checked", true);    }else {        $("#myform").find("input[name='fruit']").attr("checked", false);    }}

之前这么写的时候发现不能每次都生效，查了资料才知道比较新的jquery已经不用attr了，将attr换为prop即可，官网说明是在1.6之后建议用prop。

0 0