⑴ 如何用jQuery實現checkbox全選
全選：
$(":checkbox").attr("checked","checked");
全不選：
$(":checkbox").removeAttr("checked");
反選：
$(":checkbox:checked").removeAttr("checked");
$(":checkbox:not(:checked)").attr("checked","checked");
全手寫，沒有經過測試。
完整代碼如下，測試通過：
<html>
<head>
<title>如何用jQuery實現checkbox全選</title>
<scriptsrc="jquery-1.7.1.min.js"></script>
<scripttype="text/javascript">
//全選，全不選
functionallSelect(){
if($(":checkbox").attr("checked")!="checked"){
$(":checkbox").attr("checked","checked");
}
else{
$(":checkbox").removeAttr("checked");
}
}
//反選
functionotherSelect(){
$(":checkbox").each(function(){
if($(this).attr("checked")=="checked"){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked","checked");
}
});
}
</script>
</head>
<body>
<inputid="Checkbox1"type="checkbox"/>
<inputid="Checkbox2"type="checkbox"/>
<inputid="Checkbox3"type="checkbox"/>
<inputid="Checkbox4"type="checkbox"/>
<inputid="Checkbox5"type="checkbox"/>
<inputid="Button1"type="button"value="全選"onclick="allSelect();"/>
<inputid="Button3"type="button"value="反選"onclick="otherSelect();"/>
</body>
</html>
⑵ JS如何實現對name是數組的復選框的全選和反選以及取消選擇 form內容如下：
不明白你的意思。<input type='checkbox' name='ptpt[1]' value='a1' />
我的理解就是你想獲取多選框的值和他名字的值（不理解就是名字的字元串值還是所代表數組的值）。
你可以把多選框的名字都寫成一樣的，再給多選框多加一個屬性，裡面存儲你想獲得的ptpt值，像下面這樣
<input type='checkbox' name='p' value='a1' ptpt='ptpt[1]'/>
<input type='checkbox' name='p' value='a2' ptpt='ptpt[2]'/>
這樣在獲得選中的多選框後直接取ptpt屬性的值就可以拿到你想要的ptpt的值了。
⑶ JS如何實現全選
簡單的如下，從後台讀取數據的時候為每家店鋪的商品單獨加類
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<scriptsrc="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
<title></title>
</head>
<body>
<div><inputtype="checkbox"class="classA"/>店鋪：test1</div>
<div><inputtype="checkbox"name="nameA"/></div>
<div><inputtype="checkbox"name="nameA"/></div>
<div><inputtype="checkbox"name="nameA"/></div>
<div><inputtype="checkbox"name="nameA"/></div>
<div><inputtype="checkbox"name="nameA"/></div>
<div><inputtype="checkbox"class="classB"/>店鋪：test2</div>
<div><inputtype="checkbox"name="nameB"/></div>
<div><inputtype="checkbox"name="nameB"/></div>
<div><inputtype="checkbox"name="nameB"/></div>
<div><inputtype="checkbox"name="nameB"/></div>
</body>
<script>
$(function(){
$(".classA").change(function(){
varstatus=$(".classA").prop("checked");
$("input[name='nameA']").attr("checked",status);
})
$(".classB").change(function(){
varstatus=$(".classB").prop("checked");
$("input[name='nameB']").attr("checked",status);
})
})
</script>
</html>
⑷ js實現checkbox全選、不選與反選的方法
本文實例講述了js實現checkbox全選、不選與反選的方法。分享給大家供大家參考。具體分析如下：
一、思路：
1.
獲取元素
2.
給全選
不選
反選添加點擊事件
3.
用for循環checkbox
4.
把checkbox的checked設置為true即實現全選
5.
把checkbox的checked設置為false即實現不選
6.
通過if判斷，如果checked為true選中狀態的，就把checked設為false不選狀態，如果checked為false不選狀態的，就把checked設為true選中狀態。
二、html代碼：
<input
type="button"
value="全選"
id="sele"/>
<input
type="button"
value="不選"
id="setinterval"/>
<input
type="button"
value="反選"
id="clear"/>
<div
id="checkboxs">
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
</div>
三、js代碼：
<script>
window.onload=function(){
var
sele=document.getElementById('sele');//獲取全選
var
unsele=document.getElementById('setinterval');//獲取不選
var
clear=document.getElementById('clear');//獲取反選
var
checkbox=document.getElementById('checkboxs');//獲取div
var
checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不選
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反選
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
希望本文所述對大家的javascript程序設計有所幫助。
⑸ js 腳本怎樣實現checkbox的全選，反選，類似郵箱中郵件的全選後刪除移動
在頁眉的checkbox屬性中添加這個事件onclick="CheckAllCus()",不過頁眉中的checkbox要用html伺服器控制項.然後在用javascript實現,如下:
<script language="javascript">
function CheckAllCus()
{
for (var k=0;k<document.Form1.elements.length;k++)
{
var e = document.Form1.elements[k];
if (e.id!= 'checkAccept')
e.checked = document.Form1.checkAccept.checked;
}
}
模板列如下：
<asp:TemplateColumn>
<HeaderTemplate>
<INPUT language="javascript" id="chkAll" onclick="CheckAll(this);" type="checkbox" name="chkAll">選擇
</HeaderTemplate>
<ItemTemplate>
<INPUT language="javascript" id="checkbox<%#Container.ItemIndex%>" type="checkbox" value="<%#DataBinder.Eval(Container.DataItem,"欄位名字")%>" name="VocationId">
</ItemTemplate>
</asp:TemplateColumn>
這里可以
CheckAll函數如下,記得把函數中的frmList改成你的Form的名字:
function CheckAll(CheckBox)
{
var i;
var str = new String();
for ( i = 0; i < frmList.length; i++ )
{
str = frmList.item(i).id;
if ( str.substr(0,8) == "checkbox" )
{
if (frmList.item(i).disabled != true)
{
frmList.item(i).checked = CheckBox.checked;
if (CheckBox.checked == true )
{
//document.all.item("chk" + str.substr(8,9)).className = "";
//document.all.item("chk" + str.substr(8,9)).bgColor ="#ffdfbd";
}
else
{
//changeColor(frmList.item(i));
}
}
}
}
}
<script language="javascript">
//B100547 chen.p may select or unselect all checkbox
function SelectAll()
{
var arrInputControls;
arrInputControls = document.Form1.all;
for(i=0;i<arrInputControls.length;i++)
{
if((arrInputControls(i).tagName.toLowerCase() == "input") && (arrInputControls(i).type) && (arrInputControls(i).type.toLowerCase() == "checkbox") )
{
arrInputControls(i).checked = document.Form1.chkCheckAll.checked;
}
}
}
</script>
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="BS_Demo.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function SelectAll(thisObject)
{
var tmpTable=thisObject.parentElement.parentElement.parentElement;
var rowsCount=tmpTable.rows.length;
var buttonText=thisObject.value;
var selected=true;
if(buttonText == "本頁全選"){thisObject.value="清除選擇";}else{thisObject.value="本頁全選";selected=false}
var i;
for(i=1;i<rowsCount;i++)
{
var tmpCell=tmpTable.rows[i].cells[0];
if(tmpCell.childNodes.length>0)
{
var objCheck = tmpTable.rows[i].cells[0].childNodes[0];
if(objCheck.id.indexOf("ChkSelect")>-1)
{
objCheck.checked=selected;
//SelectOne(objCheck);
}
}
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 102; LEFT: 264px; POSITION: absolute; TOP: 192px"
runat="server">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<INPUT id="btnSelect" style="FONT-WEIGHT: bold; WIDTH: 56px; CURSOR: hand; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 20px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
onclick="SelectAll(this);" type="button" value="本頁全選" name="btnSelect">
</HeaderTemplate>
<ItemTemplate>
<INPUT id="ChkSelect" type="checkbox" name="ChkSelect" runat="server" >
</asp:textbox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>