语法说明
https://api.jquery.com/category/selectors/form-selectors/
:enabled
选择器:选择所有启用的元素,例如$('input[type="text"]:enabled')
:disabled
选择器:选择所有禁用的元素,例如$(':text:disabled')
:checked
选择器:匹配所有被选中或选定的元素(单选radio,多选checkbox),例如$(':checkbox:checked')
:selected
选择器:选择所有被选中的元素(下拉列表select),例如$('option:selected')
示例
:enabled
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<style>
#b1 {
display: inline-block;
font-size: 24px;
margin-bottom: 20px;
}
input {
font-size: 24px;
}
label {
font-size: 24px;
}
</style>
</head>
<body>
<input type="button" id="b1" value="利用jQuery对象的val()方法,改变表单内可用input元素的值"><br><br>
<input type="text" disabled placeholder="不可用值1">
<input type="text" name="" id="" placeholder="可用值1">
<input type="text" disabled placeholder="不可用值2">
<input type="text" name="" id="" placeholder="可用值2"><br><br>
<input type="checkbox" id="beauty">
<label for="beauty">美容</label>
<input type="checkbox" id="it">
<label for="it">IT</label>
<input type="checkbox" id="fiance">
<label for="fiance">金融</label>
<input type="checkbox" id="manage">
<label for="manage">管理</label><br><br><br>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
<script>
$('#b1').click(function () {
$('input[type="text"]:enabled').val('新的内容')
})
</script>
</body>
</html>
点击上面按钮:
上面的$('input[type="text"]:enabled').val('新的内容')
语句也可以改为更简单的方式:$(':text:enabled').val('新的内容')
:disabled
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<style>
#b1 {
display: inline-block;
font-size: 24px;
margin-bottom: 20px;
}
input {
font-size: 24px;
}
label {
font-size: 24px;
}
</style>
</head>
<body>
<input type="button" id="b1" value="利用jQuery对象的val()方法,改变表单内不可用input元素的值"><br><br>
<input type="text" disabled placeholder="不可用值1">
<input type="text" name="" id="" placeholder="可用值1">
<input type="text" disabled placeholder="不可用值2">
<input type="text" name="" id="" placeholder="可用值2"><br><br>
<input type="checkbox" id="beauty">
<label for="beauty">美容</label>
<input type="checkbox" id="it">
<label for="it">IT</label>
<input type="checkbox" id="fiance">
<label for="fiance">金融</label>
<input type="checkbox" id="manage">
<label for="manage">管理</label><br><br><br>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
<script>
$('#b1').click(function () {
// $('input[type="text"]:enabled').val('新的内容')
$(':text:disabled').val('新的内容')
})
</script>
</body>
</html>
点击上面的按钮:
:checked
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<style>
#b1 {
display: inline-block;
font-size: 24px;
margin-bottom: 20px;
}
input {
font-size: 24px;
}
label {
font-size: 24px;
}
</style>
</head>
<body>
<input type="button" id="b1" value="点击按钮,利用jQuery对象的length属性获取多选框选中的个数"><br><br>
<input type="text" disabled placeholder="不可用值1">
<input type="text" name="" id="" placeholder="可用值1">
<input type="text" disabled placeholder="不可用值2">
<input type="text" name="" id="" placeholder="可用值2"><br><br>
<input type="checkbox" id="beauty">
<label for="beauty">美容</label>
<input type="checkbox" id="it">
<label for="it">IT</label>
<input type="checkbox" id="fiance">
<label for="fiance">金融</label>
<input type="checkbox" id="manage">
<label for="manage">管理</label><br><br><br>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
<script>
$('#b1').click(function () {
const $cks = $(':checkbox:checked')
alert($cks.length)
})
</script>
</body>
</html>
复选框中随便选中几个:
点击上面按钮:
:selected
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.7.1.js"></script>
<style>
#b1 {
display: inline-block;
font-size: 24px;
margin-bottom: 20px;
}
input,
label,
select {
font-size: 24px;
}
</style>
</head>
<body>
<input type="button" id="b1" value="点击按钮,利用jQuery对象的text()方法,获取下拉框选中的内容"><br><br>
<input type="text" disabled placeholder="不可用值1">
<input type="text" name="" id="" placeholder="可用值1">
<input type="text" disabled placeholder="不可用值2">
<input type="text" name="" id="" placeholder="可用值2"><br><br>
<input type="checkbox" id="beauty">
<label for="beauty">美容</label>
<input type="checkbox" id="it">
<label for="it">IT</label>
<input type="checkbox" id="fiance">
<label for="fiance">金融</label>
<input type="checkbox" id="manage">
<label for="manage">管理</label><br><br><br>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
<br><br>
<select name="job" id="job" multiple size="4">
<option value="">java开发</option>
<option value="">前端开发</option>
<option value="">python开发</option>
<option value="">人工智能开发</option>
</select>
<script>
$('#b1').click(function () {
const $ops = $('option:selected')
alert($ops.text())
})
</script>
</body>
</html>
在下拉框中随便选中几项:
点击上面按钮: