真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

關(guān)于jquery選中checkbox的信息

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

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

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

2、然后在下方引入Jquery庫,首先獲取checkbox的dom元素,給它一個點擊事件,然后判斷checkbox有沒有被選中,如果選中就添加上一步設置好的css樣式,否則則刪除樣式:

3、最后來到瀏覽器,可以看到一個checkbox框,點擊將它選中:

4、點擊之后checkbox的顏色就改變了:

jquery checkbox怎么選中和不選中?

!--默認選中--

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

script

$(function () {

// 動態(tài)綁定默認狀態(tài)

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

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

//點擊判斷選中還是未選中

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

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

alert("選中");

} else {

alert("未選中");

}

})

});

/script

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

jQuery的核心特性可以總結(jié)為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的css選擇器,并且可對CSS選擇器進行擴展;擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

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

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

jquery 怎么選中checkbox指定的值

1、checkbox日常jquery操作。

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

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

input name="subBox" type="checkbox" /項1

input name="subBox" type="checkbox" /項2

input name="subBox" type="checkbox" /項3

input name="subBox" type="checkbox" /項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的復選框的值

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

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

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

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

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

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

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

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

$("input[type=checkbox]:checked").each(function(){ //由于復選框一般選中的是多個,所以可以循環(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被選中項的值

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

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

$("input[type='radio'][name='radio']").get(1).checked = true; // 設置index = 1,即第二項為當前選中

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

var isChecked = $("input[type='radio'][name='radio'][value='2']").attr("checked");// value=2的一項處于選中狀態(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添加事件,當選擇其中一項時觸發(fā)

//code...

});

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

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

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

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

/**

* jQuery設置Select的選中項

*/

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

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

/**

* jQuery添加/刪除Select的Option項

*/

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

$("#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選中的索引:

//設置select 選中的value:

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

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

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

//設置select 選中的text,通??梢栽趕elect回填中使用

var numId=33 //設置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é),應該對jquery的checkbox,radio和select有了一定的了解了吧,溫故而知新,用多了就會變的熟練起來,即使有時候忘記了,也可以來翻一翻!

jquery如何取得頁面有多少選中的checkbox?

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

1、定義頁面checkbox框,代碼如下:

body

input type='checkbox'/

input type='checkbox'/

input type='checkbox'/

/body

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

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

3、通過chks的長度知道多少被選中,代碼如下:

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

擴展資料

jQuery語言的特點:

1、快速獲取文檔元素

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

2、提供漂亮的頁面動態(tài)效果

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

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

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

4、提供對JavaScript語言的增強

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

5、增強的事件處理

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

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

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

參考資料:百度百科-jQuery

jquery動態(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


網(wǎng)站題目:關(guān)于jquery選中checkbox的信息
地址分享:http://weahome.cn/article/dsidiih.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部