Jquery實現(xiàn)復選框全選與全不選

1、首先web項目結構如圖所示，這個結構熟悉的話可以自己調(diào)整的。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、雅安服務器托管、營銷軟件、網(wǎng)站建設、安龍網(wǎng)站維護、網(wǎng)站推廣。

2、然后設置一些較為簡單的選項框，這里隨便用abcd來代替選項框了。

3、這里是jq來實現(xiàn)全選，所以引入jQuery，并且給按鈕綁定一個jQuery類型的點擊事件即可。

4、然后通過prop來設置input的屬性即可設置全選了，prop是jq自帶的一個方法。

5、因為CheckBox可以設置checked屬性，所以我們把它設置為true即可。

6、最后預覽，可以看到CheckBox都被checked中了，這樣就達到全選了。

用JQuery實現(xiàn)全選與取消的兩種簡單方法

用JQUERY實現(xiàn)全選和取消全選,沒有js那么繁瑣，而且支持更多瀏覽器。

復制代碼

代碼如下:

mce:script

type="text/javascript"!--

$(function()

{

$("#checkall").click(function()

{

$("input[@name='checkname[]']").each(function()

{

$(this).attr("checked",

true);

});

});

$("#delcheckall").click(function()

{

$("input[@name='checkname[]']").each(function()

{

$(this).attr("checked",

false);

});

});

});

//

--/mce:script

input

type='checkbox'

id='id1'

name='checkname[]'

value='1'

/value1

input

type='checkbox'

id='id2'

name='checkname[]'

value='2'

/value2

input

type='checkbox'

id='id3'

name='checkname[]'

value='3'

/value3

input

type="button"

id="checkall"

name="checkall"

value="全選"

/

input

type="button"

id="delcheckall"

name="delcheckall"

value="取消全選"

/

更加簡單的一種:

復制代碼

代碼如下:

$("#checkall").click(

function(){

if(this.checked){

$("input[name='checkname']").attr('checked',

true)

}else{

$("input[name='checkname']").attr('checked',

false)

}

}

);

如何用jquery實現(xiàn)全選text里的文字

下面的jquery代碼可以實現(xiàn)點擊文本框即全選其文字的效果：

$("input:text").click(function(){?

$(this).select();

});

示例代碼如下

創(chuàng)建Html元素

div?class="box"

span單擊文本框全選文字：/spanbr

div?class="content"

input?type="text"?value="單擊即可全選文字"

/div

/div

簡單設一下置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}

div.box?span{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

input[type='text']{width:200px;height:35px;padding:5px?10px;border:1px?solid?#ff9966;}

編寫jquery代碼

$(function(){

$(":text").click(function()?{

$(this).select();

})

})

觀察效果

初始狀態(tài)

點擊文本框之后

怎么用jquery通過點擊全選按鈕實現(xiàn)全選？

HTML代碼：

table

tr

tdinput type="checkbox" name="b"全選/tdtd內(nèi)容/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選1/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選2/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選3/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選4/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選5/td

/tr

tr

tdinput type="checkbox" name="a"/tdtd復選6/td

/table

JAVASCRIPT代碼：

script

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

//判斷當前點擊的復選框處于什么狀態(tài)$(this).is(":checked") 返回的是布爾類型

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

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

}else{

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

}

});

/script

3

這樣就實現(xiàn)了全選和全不選。

當前文章：全選jquery,全選快捷鍵ctrl加A然后怎么做
標題鏈接：http://chinadenli.net/article41/dsehded.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、品牌網(wǎng)站設計、用戶體驗、建站公司、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)