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的顏色就改變了:
!--默認選中--
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版本,那么這一點要尤其注意。
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過濾器: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
!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