怎么用jquery通过点击全选按钮实现全选 全不选

Posted 2023-05-17

方法/步骤

html代码：
<table>
<tr>
<td><input type="checkbox" name="b">全选</td><td>内容</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选1</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选2</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选3</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选4</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选5</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td><td>复选6</td>
</tr>
</table>
javascript代码：
<script>
$("input[name=\'b\']").click(function()
//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型
if($(this).is(":checked"))
$("input[name=\'a\']").prop("checked",true);
else
$("input[name=\'a\']").prop("checked",false);

);
</script>
3
这样就实现了全选和全不选 参考技术A

HTML代码：

<table>

<tr>

<td><input type="checkbox" name="b">全选</td><td>内容</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选1</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选2</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选3</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选4</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选5</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选6</td>

</table>

JAVASCRIPT代码：

<script>

$("input[name='b']").click(function()

//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型

if($(this).is(":checked"))

$("input[name='a']").prop("checked",true);

else

$("input[name='a']").prop("checked",false);

);

</script>

3

这样就实现了全选和全不选。

jquery easyui的全选

</table>
<table id="dg" class="easyui-datagrid" width="100%" style="height:470px"
url="<@app.url href="mgr/lottery/list.shtml"/>"
toolbar="#toolbar" rownumbers="true"
fitColumns="true" singleSelect="true" pagination="true">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true" width="100%"></th>
<th field="topic" align="center" width="100%">主题</th>
<th field="item" align="center" width="100%">奖项</th>
<th field="rate" align="center" width="100%">中奖率</th>
<th field="count" align="center" width="100%">数量</th>
</tr>
</thead>

帮写个全选，，，多选跟全选删除

参考技术A easyui datagrid的通过singleSelect来控制单选或者是多选的，你将singleSelect设为false就是多选啦。