Jquery實(shí)現(xiàn)復(fù)選框全選與全不選

//所有checkbox跟著全選的checkbox走。 $('[name=items]:checkbox').attr("checked", this.checked );});$('[name=items]:checkbox').click(function(){ //定義一個臨時變量，避免重復(fù)使用同一個選擇器選擇頁面中的元素，提升程序效率。 var $tmp=$('[name=items]:checkbox'); //用filter方法篩選出選中的復(fù)選框。并直接給CheckedAll賦值。 $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length); /* //一行做過多的事情需要寫更多注釋。復(fù)雜選擇器還可能影響效率。因此不推薦如下寫法。 $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);*/});//輸出值$("#send").click(function(){ var str="你選中的是：\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n";})alert(str);});});/script/headbodyform method="post" action="" 你愛好的運(yùn)動是？input type="checkbox" id="CheckedAll" /全選/全不選br/ input type="checkbox" name="items" value="足球"/足球 input type="checkbox" name="items" value="籃球"/籃球 input type="checkbox" name="items" value="羽毛球"/羽毛球 input type="checkbox" name="items" value="乒乓球"/乒乓球br/

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、海晏ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的海晏網(wǎng)站制作公司

jquery怎么選中checkbox

1、checkbox日常jquery操作。

現(xiàn)在我們以下面的html為例進(jìn)行checkbox的操作。

input id="checkAll" type="checkbox" /全選

input name="subBox" type="checkbox" /項(xiàng)1

input name="subBox" type="checkbox" /項(xiàng)2

input name="subBox" type="checkbox" /項(xiàng)3

input name="subBox" type="checkbox" /項(xiàng)4

全選和全部選代碼：

script type="text/javascript"

$(function() {

$("#checkAll").click(function() {

$('input[name="subBox"]').attr("checked",this.checked);

});

var $subBox = $("input[name='subBox']");

$subBox.click(function(){

$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);

});

});

/script

checkbox屬性：

var val = $("#checkAll").val();// 獲取指定id的復(fù)選框的值

var isSelected = $("#checkAll").attr("checked"); // 判斷id=checkAll的那個復(fù)選框是否處于選中狀態(tài)，選中則isSelected=true;否則isSelected=false;

$("#checkAll").attr("checked", true);// or

$("#checkAll").attr("checked", 'checked');// 將id=checkbox_id3的那個復(fù)選框選中，即打勾

$("#checkAll").attr("checked", false);// or

$("#checkAll").attr("checked", '');// 將id=checkbox_id3的那個復(fù)選框不選中，即不打勾

$("input[name=subBox][value=3]").attr("checked", 'checked');// 將name=subBox, value=3 的那個復(fù)選框選中，即打勾

$("input[name=subBox][value=3]").attr("checked", '');// 將name=subBox, value=3 的那個復(fù)選框不選中，即不打勾

$("input[type=checkbox][name=subBox]").get(2).checked = true;// 設(shè)置index = 2，即第三項(xiàng)為選中狀態(tài)

$("input[type=checkbox]:checked").each(function(){ //由于復(fù)選框一般選中的是多個,所以可以循環(huán)輸出選中的值

alert($(this).val());

});

2、radio的jquery日常操作及屬性

我們?nèi)匀灰韵旅娴膆tml為例：

input type="radio" name="radio" id="radio1" value="1" /1

input type="radio" name="radio" id="radio2" value="2" /2

input type="radio" name="radio" id="radio3" value="3" /3

input type="radio" name="radio" id="radio4" value="4" /4

radio操作如下：

$("input[name=radio]:eq(0)").attr("checked",'checked'); //這樣就是第一個選中咯。

//jquery中，radio的選中與否和checkbox是一樣的。

$("#radio1").attr("checked","checked");

$("#radio1").removeAttr("checked");

$("input[type='radio'][name='radio']:checked").length == 0 ? "沒有任何單選框被選中" : "已經(jīng)有選中";

$('input[type="radio"][name="radio"]:checked').val(); // 獲取一組radio被選中項(xiàng)的值

$("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 設(shè)置value = 2的一項(xiàng)為選中

$("#radio2").attr("checked", "checked"); // 設(shè)置id=radio2的一項(xiàng)為選中

$("input[type='radio'][name='radio']").get(1).checked = true; // 設(shè)置index = 1，即第二項(xiàng)為當(dāng)前選中

var isChecked = $("#radio2").attr("checked");// id=radio2的一項(xiàng)處于選中狀態(tài)則isChecked = true, 否則isChecked = false;

var isChecked = $("input[type='radio'][name='radio'][value='2']").attr("checked");// value=2的一項(xiàng)處于選中狀態(tài)則isChecked = true, 否則isChecked = false;

3、select下拉框的日常jquery操作

select操作相比checkbox和radio要相對麻煩一些，我們?nèi)匀灰韵旅娴膆tml為例來說明：

select name="select" id="select_id" style="width: 100px;"

option value="1"11/option

option value="2"22/option

option value="3"33/option

option value="4"44/option

option value="5"55/option

option value="6"66/option

/select

看select的如下屬性：

$("#select_id").change(function(){ // 1.為Select添加事件，當(dāng)選擇其中一項(xiàng)時觸發(fā)

//code...

});

var checkValue = $("#select_id").val(); // 2.獲取Select選中項(xiàng)的Value

var checkText = $("#select_id :selected").text(); // 3.獲取Select選中項(xiàng)的Text

var checkIndex = $("#select_id").attr("selectedIndex"); // 4.獲取Select選中項(xiàng)的索引值,或者：$("#select_id").get(0).selectedIndex;

var maxIndex =$("#select_id :last").get(0).index; // 5.獲取Select最大的索引值

/**

* jQuery設(shè)置Select的選中項(xiàng)

*/

$("#select_id").get(0).selectedIndex = 1; // 1.設(shè)置Select索引值為1的項(xiàng)選中

$("#select_id").val(4); // 2.設(shè)置Select的Value值為4的項(xiàng)選中

/**

* jQuery添加/刪除Select的Option項(xiàng)

*/

$("#select_id").append("option value='新增'新增option/option"); // 1.為Select追加一個Option(下拉項(xiàng))

$("#select_id").prepend("option value='請選擇'請選擇/option"); // 2.為Select插入一個Option(第一個位置)

$("#select_id").get(0).remove(1); // 3.刪除Select中索引值為1的Option(第二個)

$("#select_id :last").remove(); // 4.刪除Select中索引值最大Option(最后一個)

$("#select_id [value='3']").remove(); // 5.刪除Select中Value='3'的Option

$("#select_id").empty();

$("#select_id").find("option:selected").text(); // 獲取select 選中的 text :

$("#select_id").val(); // 獲取select選中的 value:

$("#select_id").get(0).selectedIndex; // 獲取select選中的索引:

//設(shè)置select 選中的value：

$("#select_id").attr("value","Normal");

$("#select_id").val("Normal");

$("#select_id").get(0).value = value;

//設(shè)置select 選中的text，通常可以在select回填中使用

var numId=33 //設(shè)置text==33的選中！

var count=$("#select_id option").length;

for(var i=0;icount;i++)

{ if($("#select_id").get(0).options[i].text == numId)

{

$("#select_id").get(0).options[i].selected = true;

break;

}

}

通過上面的總結(jié)，應(yīng)該對jquery的checkbox,radio和select有了一定的了解了吧，溫故而知新，用多了就會變的熟練起來，即使有時候忘記了，也可以來翻一翻！

jquery 怎么給復(fù)選框選中

有兩種方法，

①：點(diǎn)擊事件；如：

input?type="checkbox"?class="ck"?/

$(".ck").click();

這樣就能設(shè)置復(fù)選框選中；

②：設(shè)置其checked屬性；如：

input?type="checkbox"?class="ck"?/

$(".ck").prop("checked",true);

這樣就設(shè)置復(fù)選框選中

關(guān)于jQuery導(dǎo)航的復(fù)選框

jquery操作復(fù)選框(checkbox)的12個小技巧。

1、獲取單個checkbox選中項(xiàng)(三種寫法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

2、 獲取多個checkbox選中項(xiàng)

$('input:checkbox').each(function() {

if ($(this).attr('checked') ==true) {

alert($(this).val());

}

});

3、設(shè)置第一個checkbox 為選中值

$('input:checkbox:first').attr("checked",'checked');

或者

$('input:checkbox').eq(0).attr("checked",'true');

4、設(shè)置最后一個checkbox為選中值

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

5、根據(jù)索引值設(shè)置任意一個checkbox為選中值

$('input:checkbox).eq(索引值).attr('checked', 'true');

索引值=0,1,2....

或者

$('input:radio').slice(1,2).attr('checked', 'true');

6、選中多個checkbox同時選中第1個和第2個的checkbox

$('input:radio').slice(0,2).attr('checked','true');

7、根據(jù)Value值設(shè)置checkbox為選中值

$("input:checkbox[value='1']").attr('checked','true');

8、刪除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9、刪除第幾個checkbox

$("input:checkbox").eq(索引值).remove();

索引值=0,1,2....

如刪除第3個checkbox:

$("input:checkbox").eq(2).remove();

10、遍歷checkbox

$('input:checkbox').each(function (index, domEle) {

//寫入代碼

});

11、全部選中

$('input:checkbox').each(function() {

$(this).attr('checked', true);

});

12、全部取消選擇

$('input:checkbox').each(function () {

$(this).attr('checked',false);

});

JQuery對CheckBox的一些相關(guān)操作

一、通過選擇器選取CheckBox:

1.給CheckBox設(shè)置一個id屬性，通過id選擇器選取：

input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /

JQuery:

$("#chkOne").click(function(){});

2.給CheckBox設(shè)置一個class屬性，通過類選擇器選取：

input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" /

JQuery:

$(".chkTwo").click(function(){});

3.通過標(biāo)簽選擇器和屬性選擇器來選取：

input type="checkbox" name="someBox" value="1" checked="checked" /

input type="checkbox" name="someBox" value="2" /

JQuery:

$("input[name='someBox']").click(function(){});

二、對CheckBox的操作：

以這段checkBox代碼為例：

input type="checkbox" name="box" value="0" checked="checked" /

input type="checkbox" name="box" value="1" /

input type="checkbox" name="box" value="2" /

input type="checkbox" name="box" value="3" /

1.遍歷checkbox用each()方法：

$("input[name='box']").each(function(){});

2.設(shè)置checkbox被選中用attr();方法：

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

在HTML中，如果一個復(fù)選框被選中，對應(yīng)的標(biāo)記為 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 則會提示您是"true"而不是"checked"，所以判斷 if("checked"==$("#id").attr("checked")) 是錯誤的，應(yīng)該是 if(true == $("#id").attr("checked"))

3.獲取被選中的checkbox的值：

$("input[name='box'][checked]").each(function(){

if (true == $(this).attr("checked")) {

alert( $(this).attr('value') );

}

或者：

$("input[name='box']：checked").each(function(){

if (true == $(this).attr("checked")) {

alert( $(this).attr('value') );

}

$("input[name='box']：checked")與 $("input[name='box']")有何區(qū)別沒試過，我試了用 $("input[name='box']")能成功。

4.獲取未選中的checkbox的值：

$("input[name='box']").each(function(){

if ($(this).attr('checked') ==false) {

alert($(this).val());

}

});

5.設(shè)置checkbox的value屬性的值:

$(this).attr("value",值);

三、 一般都是創(chuàng)建一個js數(shù)組來存儲遍歷checkbox得到的值，創(chuàng)建js數(shù)組的方法：

1. var array= new Array();

2. 往數(shù)組添加數(shù)據(jù)：

array.push($(this).val());

3.數(shù)組以“,”分隔輸出：

alert(array.join(','));

jquery讓復(fù)選框選中怎么做

首先 ?你要分清Jquery中 ?prop和attr 的區(qū)別

借鑒網(wǎng)站?

我舉一個例子 ?就是全選/反選的情況 ? 如果你是用jquery中的attr來進(jìn)行選中的話 ? 第一次可以選中 ? 但當(dāng)你第二次點(diǎn)擊全選的時候 ?就沒有反應(yīng)了 ? ?子復(fù)選框 ?不會有任何反應(yīng)

但是如果你用的是prop 就沒有這么多顧慮了 ?直接使用就可以 ?廢話不多說 ?直接貼代碼驗(yàn)證

body

div?class="panel"

div?class="panel-body"

input?type="checkbox"?id="chkAll"?/全選

ul

liinput?type="checkbox"?id="chkName1"?name="chkFruit"?/蘋果/li

liinput?type="checkbox"?id="chkName2"?name="chkFruit"?/香蕉/li

liinput?type="checkbox"?id="chkName3"?name="chkFruit"?/桃子/li

liinput?type="checkbox"?id="chkName4"?name="chkFruit"?/荔枝/li

/ul

/div

/div

/body

script?type="text/javascript"

$(function?()?{

//全選

$("#chkAll").change(function?()?{

$("input[name='chkFruit']").prop("checked",?$(this).prop("checked"));???????//成功

$("input[name='chkFruit']").attr("checked",?$(this).prop("checked"));???????//第一次選中成功??第二次??子復(fù)選框沒有反應(yīng)

});

//全部選中

//$("input[name='chkFruit']").prop("checked",?"checked");

//eq(index)???Index索引從0開始??選中第一個

//$("input[name='chkFruit']").eq(0).prop("checked",?"checked");

});

/script

用jquery把復(fù)選框checkbox選中的值放入input框中

1、新建一個html文件，命名為test.html。

2、在test.html文件內(nèi)，在p標(biāo)簽內(nèi)，使用input標(biāo)簽創(chuàng)建一個checkbox選項(xiàng)和一個文本框，并且文本框設(shè)置默認(rèn)值。

3、在test.html文件內(nèi)，給每一個checkbox類型input元素設(shè)置name屬性，統(tǒng)一設(shè)置為ck，主要用于下面通過該name獲得input對象。

4、在test.html文件內(nèi)，使用button標(biāo)簽創(chuàng)建一個按鈕，按鈕名稱為“獲得input值”。

5、在test.html文件中，給button按鈕綁定onclick點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時，執(zhí)行g(shù)etinput（）函數(shù)。

6、在js標(biāo)簽中，創(chuàng)建getinput()函數(shù)，在函數(shù)內(nèi)，通過“:checked”選擇器獲得被選中的checkbox對象，使用next()方法獲得checkbox相鄰的input文本框?qū)ο螅ㄟ^val()方法獲得它的值。最后，使用alert()方法輸出input的值。

7、在瀏覽器打開test.html文件，點(diǎn)擊按鈕，查看結(jié)果。

當(dāng)前標(biāo)題：jquery使復(fù)選框選中,jquery實(shí)現(xiàn)復(fù)選框全選
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article45/dsijcei.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、定制開發(fā)、手機(jī)網(wǎng)站建設(shè)

廣告

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