❤️判断radio,select,checkbox是否选中的方法

小明的学习圈子2023-08-13前端控件状态

判断radio,select,checkbox是否选中的方法

js jquery中判断checkbox是否被选中的方法 在js中:

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

jQuery中:

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

1、attr()方法 设置或者返回备选元素的值

attr(属性名) //获取属性的值

attr(属性名,属性值) //设置属性的值

  $("#id]").attr("checked") JQ1.6之后返回checked或者是undefined1.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;//索引
Last Updated 2024/4/6 10:47:15