1. 程式人生 > >判斷radio,select,checkbox是否選中的方法

判斷radio,select,checkbox是否選中的方法

js jquery中判斷checkbox是否被選中的方法
在js中:

  document.getElementById("checkboxID").checked 返回true或者false

jQuery中:

  $("input[type='checkbox']").is(':checked') 返回true或false

 1、attr()方法 設定或者返回備選元素的值

  attr(屬性名) //獲取屬性的值

  attr(屬性名,屬性值) //設定屬性的值

  $("#id]").attr("checked") JQ1.6之後返回checked或者是undefined (1.6之錢返回true或者是false)

  $("input[type='checkbox']").attr("chacked",true); 將多選框設為全選中狀態 false為不選中狀態

 2、prop()方法
  $("input[type='checkbox']").prop("checked") 返回true或者false

  還有removeAttr(屬性名)、removeProp(屬性名)刪除該屬性

例:

  $("input['tupe=checkbox']").removeAttr("checked");移除多選框的選中

================js和jq判斷select是否選中、獲取select選中的值=========
js和jq判斷select是否選中、獲取select選中的值


js和jq獲取select選中的值
JS部分
var mySelect = document.getElementById(”testSelect”);//定位id(獲取select)
var index =mySelect.selectedIndex;// 選中索引(選取select中option選中的第幾個)
var text =mySelect.options[index].text; // 選中文字
var value =mySelect.options[index].value; // 選中值
mySelect.options[index].selected // 判斷select中的某個option是否選中 true為選中 false 為未選中
[html] view plain copy
if(mySelect.options[1].selected == true){
console.log(1)
}

JQ部分
1.判斷option是否被選中
$("#id").is(":checked")//為false時是未被選中的,為true時是被選中

$("#id").attr('checked')==undefined//為false時是未被選中的,為true時是被選中

2.獲取select選中的值
$("#mySelect option:selected").text()

$("#mySelect").find('option:selected').text()

$("#mySelect").val();

3.獲取select選中的索引
$("#mySelect").get(0).selectedindex

4.新增option
$("#mySelect").append("<option value="+value+">"+text+"<option>");

5.刪除option
$("#myOption").remove()

==================================================================
Jquery判斷單選框是否選中和獲取選中的值
第一種:利用選中值判斷選中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery radio</title>
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" language="javascript">
/*------判斷radio是否有選中,獲取選中的值--------*/
$(function(){
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
alert("什麼也沒選中!");
return false;
}
else{
alert(val);
}
var list= $('input:radio[name="list"]:checked').val();
if(list==null){
alert("請選中一個!");
return false;
}
else{
alert(list);
}
});
});
</script>
</head>
<body>
<form id="form1" >
  <input type="radio" name="sex" value="男" />男
  <input type="radio" name="sex" value="女" />女
<br />
  <input type="radio" name="list" value="十分滿意" />十分滿意
  <input type="radio" name="list" value="滿意" />滿意
  <input type="radio" name="list" value="不滿意" />不滿意
  <input type="radio" name="list" value="非常差" />非常差
<br />
  <input type="submit" value="submit" id="btnSubmit" />
</form>
</body>
</html>

第二種:利用checked屬性判斷選中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery radio</title>
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
<script type="text/javascript">
$(function () {
  $("input").click(function () {
    if ($(this).attr("checked")) {
      alert("選中了");
    }
  });
});
</script>
</head>
<body>
<input type="radio"/>
</body>
</html>

第三種:jquery獲取單選框按鈕的值
$("input[name='items']:checked").val();
function checkradio(){
var item = $(":radio:checked");
var len=item.length;
if(len>0){
alert("yes--選中的值為:"+$(":radio:checked").val());
}
}

第四種:獲取一組radio被選中的值
var item = $('input[name=items][checked]').val();
第五種:設定單選按鈕被選中
$("input[type=radio]").attr("checked",'2');//設定value=2的專案為當前選中項

==================================================================
js中獲取方法

var obj = document.getElementByIdx_xx_x(”testSelect”); //定位id

var index = obj.selectedIndex; // 選中索引

var text = obj.options[index].text; // 選中文字

var value = obj.options[index].value; // 選中值

jQuery中獲得選中select值

第一種方式
$('#testSelect option:selected').text();//選中的文字

$('#testSelect option:selected') .val();//選中的值

$("#testSelect ").get(0).selectedIndex;//索引