jquery 實(shí)現(xiàn)checkbox選中顏色改變

1、首先用hbuilder編輯器新建一個(gè)html文件，里面設(shè)置一個(gè)input框并設(shè)置它的tpye屬性為checkbox，設(shè)置name屬性為checkbox，同時(shí)在上方設(shè)置一個(gè)bgred的樣式備用：

成都創(chuàng)新互聯(lián)公司是專業(yè)的豐澤網(wǎng)站建設(shè)公司，豐澤接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行豐澤網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

2、然后在下方引入Jquery庫(kù)，首先獲取checkbox的dom元素，給它一個(gè)點(diǎn)擊事件，然后判斷checkbox有沒有被選中，如果選中就添加上一步設(shè)置好的css樣式，否則則刪除樣式：

3、最后來(lái)到瀏覽器，可以看到一個(gè)checkbox框，點(diǎn)擊將它選中：

4、點(diǎn)擊之后checkbox的顏色就改變了：

jquery checkbox怎么選中和不選中？

!--默認(rèn)選中--

input type="checkbox" checked="checked" id="ck"

script

$(function () {

// 動(dòng)態(tài)綁定默認(rèn)狀態(tài)

//? $("#ck").attr("checked",true)//選中

// $("#ck").attr("checked",false)//未選中

//點(diǎn)擊判斷選中還是未選中

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

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

alert("選中");

} else {

alert("未選中");

}

})

});

/script

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2010年1月，也是jQuery的四周年生日，jQuery 1.4版發(fā)布，為了慶祝jQuery四周歲生日，jQuery團(tuán)隊(duì)特別創(chuàng)建了jquery14.com站點(diǎn)，帶來(lái)了連續(xù)14天的新版本專題介紹。

在1.3及更早版本中，jQuery通過JavaScript的eval方法來(lái)解析json對(duì)象。在1.4中，如果你用的瀏覽器支持，則會(huì)使用原生的JSON.parse解析json對(duì)象，這樣對(duì)json對(duì)象的書寫驗(yàn)證則更為嚴(yán)格。比如：{foo: "bar"}的寫法將不會(huì)被驗(yàn)證為合法的json對(duì)象，必須寫成{"foo":"bar"}。如果你的程序打算升級(jí)到1.4版本，那么這一點(diǎn)要尤其注意。

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的那個(gè)復(fù)選框是否處于選中狀態(tài)，選中則isSelected=true;否則isSelected=false;

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

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

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

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

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

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

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

$("input[type=checkbox]:checked").each(function(){ //由于復(fù)選框一般選中的是多個(gè),所以可以循環(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'); //這樣就是第一個(gè)選中咯。

//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要相對(duì)麻煩一些，我們?nèi)匀灰韵旅娴膆tml為例來(lái)說(shuō)明：

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)時(shí)觸發(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追加一個(gè)Option(下拉項(xiàng))

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

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

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

$("#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)該對(duì)jquery的checkbox,radio和select有了一定的了解了吧，溫故而知新，用多了就會(huì)變的熟練起來(lái)，即使有時(shí)候忘記了，也可以來(lái)翻一翻！

jquery如何取得頁(yè)面有多少選中的checkbox？

通過jquery過濾器:checked方式獲取所有選中的checkbox

1、定義頁(yè)面checkbox框,代碼如下：

body

input type='checkbox'/

input type='checkbox'/

input type='checkbox'/

/body

2、通過jquery過濾器選擇選中的checkbox，代碼如下：

var chks=$("input:checked");//獲取所有選中的checkbox,chks是一個(gè)元素?cái)?shù)組

3、通過chks的長(zhǎng)度知道多少被選中，代碼如下：

var len = chks.length;//選中的checkbox數(shù)量

擴(kuò)展資料

jQuery語(yǔ)言的特點(diǎn)：

1、快速獲取文檔元素

jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。

2、提供漂亮的頁(yè)面動(dòng)態(tài)效果

jQuery中內(nèi)置了一系列的動(dòng)畫效果，可以開發(fā)出非常漂亮的網(wǎng)頁(yè)，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。

3、創(chuàng)建AJAX無(wú)刷新網(wǎng)頁(yè)

AJAX是異步的JavaScript和ML的簡(jiǎn)稱，可以開發(fā)出非常靈敏無(wú)刷新的網(wǎng)頁(yè)，特別是開發(fā)服務(wù)器端網(wǎng)頁(yè)時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁(yè)，而使用AJAX特效后，可以對(duì)頁(yè)面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。

4、提供對(duì)JavaScript語(yǔ)言的增強(qiáng)

jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。

5、增強(qiáng)的事件處理

jQuery提供了各種頁(yè)面事件，它可以避免程序員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。

6、更改網(wǎng)頁(yè)內(nèi)容

jQuery可以修改網(wǎng)頁(yè)中的內(nèi)容，比如更改網(wǎng)頁(yè)的文本、插入或者翻轉(zhuǎn)網(wǎng)頁(yè)圖像，jQuery簡(jiǎn)化了原本使用JavaScript代碼需要處理的方式。

參考資料：百度百科-jQuery

jquery動(dòng)態(tài)控制checkbox選中狀態(tài)

!DOCTYPE html

html

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"/script

titleRunJS 演示代碼/title

script

$(document).ready(function(){

var str = "1,2,3";

$(str.split(",")).each(function (i,dom){

$(":checkbox[value='"+dom+"']").prop("checked",true);

$(":checkbox[id='"+dom+"']").prop("checked",true);

});

});

/script

/head

body

labelinput type="checkbox" /1/label

labelinput type="checkbox" /2/label

labelinput type="checkbox" /3/label

/body

/html

當(dāng)前題目：關(guān)于jquery選中checkbox的信息
網(wǎng)頁(yè)URL：http://chinadenli.net/article9/dsidiih.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、做網(wǎng)站、網(wǎng)站維護(hù)

廣告

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