Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 編寫前臺腳本的時候，經常會操作 Html 控件，比如 checkbox、radio、select，用 Jquery 庫操作其他會方便很多，下面用Jq對這些控件的操作進行一個全面的代碼總結。
一、Jquery 對 CheckBox 的操作：
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>籃球</span> <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span> <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span> <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>
1、查找控件：
(1) 選擇所有的 checkbox 控件：
根據input類型選擇： $("input[type=checkbox]") 等同於文檔中的 $("input:checkbox")
根據名稱選擇：$("input[name=ckb]")
(2) 根據索引獲取checkbox控件：
$("input:checkbox:eq(1)")
結果返回：<input id="ckb2" name="ckb" value="1" type="checkbox" /><span>排球</span>
(3) 獲得所有禁用的 checkbox 控件：
$("input[type=checkbox]:disabled")
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>
(4)獲得所有啟用的checkbox控件
$("input:checkbox[disabled=false]")
結果返回：
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>籃球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>
(5)獲得所有checked的checkbox控件
$("input:checkbox:checked")
結果返回：
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>籃球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span>
(6)獲取所有未checkd的checkbox控件
$("input:checkbox:[checked=false]")
結果返回：
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>
(7)獲得value 為 0 的checkbox 控件
$("input[type=checkbox][value=0]")
結果返回：
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>籃球</span>
2、禁用：
(1)禁用所有的checkbox控件：
$("input:checkbox").attr("disabled", true)
(2)啟用某些禁用的 checkbox 控件：
$("input:checkbox:disabled").attr("disabled", false);
(3)判斷value=0的checkbox是否禁用:
if ($("input[name=ckb][value=0]").attr("disabled") == true) {
alert("不可用");
}
else {
alert("可用");
}
3、選擇：
(1)全選：
$("input:checkbox").attr("checked", true);
(2)全不選：
$("input:checkbox").attr("checked", false);
(3)反選：
$("input:checkbox").each(function () {
if ($(this).attr("checked")) {
//$(this).removeAttr("checked");
$(this).attr("checked", false);
}
else {
$(this).attr("checked",true);
}
});
4、取值：
function GetCkboxValues() {
var str="";
$("input:checkbox:checked").each(function () {
switch ($(this).val()) {
case "0":
str += "籃球,";
break;
case "1":
str += "排球,";
break;
case "2":
str += "乒乓球,";
break;
case "3":
str += "羽毛球,";
break;
}
});
str=str.substring(0, str.length - 1)
}
二、Jquery 對 Radio 的操作：
<input name="edu" value="0" type="radio" checked="checked" /><span>專科</span> <input name="edu" value="1" type="radio" /><span>本科</span> <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span> <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>
1、查找控件：
(1)選擇所有的 Radio控件
//根據input類型選擇
$("input[type=radio]") //等同於文檔中的 $("input:radio")
//根據名稱選擇
$("input[name=edu]")
(2)根據索引獲得 Radio控件
$("input:radio:eq(1)")
結果返回：<input name="edu" value="1" type="radio" /><span>本科</span>
(3)獲得所有禁用的 Radio 控件
$("input:radio:disabled")
結果返回：
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>
(4)獲得所有啟用的 Radio 控件
$("input:radio[disabled=false]")
結果返回：
<input name="edu" value="0" type="radio" checked="checked" /><span>專科</span>
<input name="edu" value="1" type="radio" /><span>本科</span>
(4)獲得checked的 RadioButton 控件
$("input:radio:checked") //等同於 $("input[type=radio][checked]")
結果返回：
<input name="edu" value="0" type="radio" checked="checked" /><span>專科</span>
(5)獲取未checked的 RadioButton 控件
$("input:radio[checked=false]").attr("disabled", true);
結果返回：
<input name="edu" value="1" type="radio" /><span>本科</span>
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>
(6)獲得value 為 0 RadioButton 控件
$("input[type=radio][value=0]")
結果返回：<input name="edu" value="0" type="radio" checked="checked" /><span>專科</span>
2、禁用：
(1)禁用所有的Radio
$("input:radio").attr("disabled", true);
或者 $("input[name=edu]").attr("disabled", true);
(2)禁用索引為1的Radio控件
$("input:radio:eq(1)").attr("disabled", true);
(3)啟用禁用的Radio控件
$("input:radio:disabled").attr("disabled", false);
(4)禁用當前已經啟用的Radio控件
$("input:radio[disabled=false]").attr("disabled", true);
(5)禁用 checked 的RadioButton控件
$("input[type=radio][checked]").attr("disabled", true);
(6)禁用未checked 的RadioButton控件
$("input:[type=radio][checked=false]").attr("disabled", true);
(7)禁用value=0 的RadioButton
$("input[type=radio][value=0]").attr("disabled", true);
3、取值：
$("input:radio:checked").val()
4、選擇：
(1)判斷value=1 的radio控件是否選中，未選中則選中：
var v = $("input:radio[value=1]").attr("checked");
if (!v) {
$("input:radio[value=1]").attr("checked", true);
}
(2)轉換成Dom元素數組來進行控制選中：
$("input:radio[name=edu]").get(1).checked = true;
三、Jquery 對 Select 操作
<select id="cmbxGame"> <option value="0" selected="selected">黑貓警長</option> <option value="1" disabled="disabled">大頭兒子</option> <option value="2">熊出沒</option> <option value="3">喜羊羊</option> </select>
1、禁用：
(1)禁用select 控件
$("select").attr("disabled", true);
(2)禁用select中所有option
$("select option").attr("disabled", true);
(3)禁用value=2 的option
$("select option[value=2]").attr("disabled", true);
(4)啟用被禁用的option
$("select option:disabled").attr("disabled", false);
2、選擇：
（1）option 值為 2 的被選擇：
var v = $("select option[value=2]").attr("selected");
if (!v) {
$("select option[value=2]").attr("selected", true);
}
(2) 索引為 2 的option 項 被選擇
$("select")[0].selectedIndex = 2;
或者 $("select").get(0).selectedIndex = 2;
或者 $("select option[index=2]").attr("selected", true);
3、獲取選擇項的索引：
(1)獲取選中項索引: jq 中的 get 函數是將jq對象轉換成了dom元素
var selectIndex = $("select").get(0).selectedIndex;
或者 var selectIndex = $("select option:selected").attr("index");
(2)獲取最大項的索引：
var maxIndex = $("select option:last").attr("index")
或者 var maxIndex = $("select option").length - 1
4、刪除select 控件中的option
(1)清空所有option
$("select option").empty();
(2)刪除 value=2 的option
$("select option[value=2]").remove();
(3)刪除第一個option
$("select option[index=0]").remove();
(4)刪除 text="熊出沒" 的option
$("select option[text=熊出沒]").remove(); //此方法某些瀏覽器不支持用下面的方法替代
註意：each 中不能用break 用return false 代替，continue 用 return true 代替
$("select option").each(function () {
if ($(this).text() == "熊出沒") {
$(this).remove();
return false;
}
});
5、在select中插入option
(1)在首位置插入 option 並選擇
$("select").prepend("<option value=‘0‘>請選擇</option>");
$("select option[index=0]").attr("selected", true);
(2)在尾位置插入 option 並選擇
$("select").append("<option value=\"5\">哪咤鬧海</option>");
var maxIndex = $("select option:last").attr("index")
$("select option[index=" + maxIndex + "]").attr("selected", true);
(3)在固定位置插入 比如第一個option 項之後插入 新的option 並選擇
$("<option value=\"5\">哪咤鬧海</option>").insertAfter("select option[index=0]");
或者$("select option[index=0]").after("<option value=\"5\">哪咤鬧海</option>");
$("select option[index=1]").attr("selected", true);
6、取值：
function GetCbxSelected() {
var v = $("select option:selected").val();
var t = $("select option:selected").text();
alert("值:" + v + "文本:" + t);
}
Jquery 操作Html 控件 CheckBox、Radio、Select 控件