jQuery复选框全选、单选获取选中的value值

新酱

160
文章

42
评论

2019年5月27日20:26:33 评论 3,422 387字阅读1分17秒

Table代码

<input type="button" id="delete" name="name" value="删除" />
    <div style="text-align: center">
        <table border="1" id="td">
            <tr>
                <th>
                    <input id="all" type="checkbox" name="all" value="" />
                </th>
                <th>地址ID
                </th>
                <th>地址标题
                </th>
                <th>详细地址
                </th>
                <th>创建时间
                </th>
            </tr>
            <%
                foreach (var item in addlist)
                {
            %>
            <tr>
                <td>
                    <input type="checkbox" name="name" value="<%=item.Aid %>" /></td>
                <td><%=item.Aid %></td>
                <td><%=item.Atitle %></td>
                <td><%=item.Acontent %></td>
                <td><%=item.ACTime %></td>
                <td></td>
            </tr>
            <%
                }
            %>
        </table>

    </div>

<tr>

<th>

</th>

<th>地址ID

</th>

<th>地址标题

</th>

<th>详细地址

</th>

<th>创建时间

</th>

</tr>

foreach (var item in addlist)

{

<tr>

<td>

</tr>

}

</table>

</div>

jQuery代码

<script>
//全选
        $(function () {
            $('#all').click(function () {
                if (this.checked) {
                    $('#td :checkbox').prop("checked", true);
                } else {
                    $('#td :checkbox').prop("checked", false);
                }
            });
//获取选中的value(id)删除
            $('#delete').click(function () {
                var valArr = new Array;
                $("#td :checkbox[name='name']:[checked]").each(function (i) {
                    valArr[i] = $(this).val();
                });
                for(var i=0;i<valArr.length;i++)
                {
                    alert(valArr[i]);
                }
            });
        });
    </script>

//全选

$(function () {

$('#all').click(function () {

if (this.checked) {

$('#td :checkbox').prop("checked", true);

} else {

$('#td :checkbox').prop("checked", false);

}

});

//获取选中的value(id)删除

$('#delete').click(function () {

var valArr = new Array;

$("#td :checkbox[name='name']:[checked]").each(function (i) {

valArr[i] = $(this).val();

});

for(var i=0;i<valArr.length;i++)

{

alert(valArr[i]);

}

});

</script>

解析

全选

全选是首先id选择器选中全选input，判断一下当全选input被选中的时候将table(id=td)里面的所有复选框的checked属性全部修改为true即可实现全选的效果，同理将checked修改为false就取消了全选

多选 单选获取选中的value值

获取删除按钮，创建一个Array数组对象，因为全选按钮也在
table(id=td)里面，但是全选按钮的name值为all，所以加一个条件只获取name属性为name并且已经选中的复选框，each遍历他们，将被选中的复选框的值添加到数组里面，然后通过for循环即可取出每个被选中的复选框value的值。可以在for循环里面发ajax实现通过id删除等功能。