4.フォームオブジェクトフィルターセレクター
始める前に、無効属性と複数属性の2つの属性を紹介しましょう。これらは、チェックされた属性と選択された属性と同じです
。checked= "checked"は、チェックボックスまたは単一選択ボックスが最初に選択されていることを意味します。選択されません。
選択=「選択」ドロップダウンリスト内のオプション項目が選択されているかどうかを示す
無効=「無効」は入力入力ボックスが無効になったときに、有効または無効にされ、デフォルトで利用でき、利用可能であるかどうかを示す
複数の=「複数」があるかどうかを示しますドロップダウンリストでは複数の選択が可能です。デフォルトでは、複数の選択は許可されておらず、複数の属性が割り当てられている場合は複数の選択が許可されます。
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框1"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框2"/><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
フォームフィルター
- ：inputは、すべてのinput、textarea、select、およびbutton要素に一致します
- ：textはすべてのテキスト入力ボックスに一致します
- ：passwordはすべてのパスワード入力ボックスと一致します
- ：radioはすべてのラジオボタンに一致します
- ：checkboxはすべてのチェックボックスに一致します
- ：submitはすべての送信ボタンに一致します
- ：imageはすべてのimgタグに一致します
- ：resetはすべてのリセットボタンに一致します
- ：buttonはすべての入力タイプに一致します=ボタンボタン
- ：fileはすべての入力タイプに一致します=ファイルファイルのアップロード
- ：hiddenはすべての非表示要素に一致しますdisplay：noneまたはinput type = hidden
フォームオブジェクト属性フィルター：
- ：enabledは、使用可能なすべての要素に一致します
- ：disabledは、使用できないすべての要素に一致します
- ：checkedは、選択したすべての無線に一致します。ドロップダウンリストで選択されたオプションラベルオブジェクト
- ：selectedは、選択したドロップダウンリストで選択したすべてのオプションラベルオブジェクトに一致します
注：3：チェックされたフィルター要素には4：selectedが含まれている必要があります。3つの完全なセットを制限し、選択された単一選択とチェックボックスの内容のみを取得できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-30</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.对表单内 可用input 赋值操作
//2.对表单内 不可用input 赋值操作
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
//4.获取多选框，每个选中的value值
//5.获取下拉框选中的内容
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框1"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框2"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
インターフェース効果を図に示します。
機能の実現：対応するクリックイベントをそれぞれ5つのボタンにバインドします
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.对表单内 可用input 赋值操作
$("#btn1").click(function () {
$(":text:enabled").val("我是陆亿行-2021-01-31");
}); //jQuery对象
// val()可以操作表单项的value属性值(对jQuery对象而言)，相当于dom对象的value
// 它可以进行设置和获取
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function () {
$(":text:disabled").val("我不是陆亿行-2021-01-31");
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function () {
alert('多选框的个数：'+$(":checkbox").length);
alert('选中的个数：'+$(":checkbox:checked").length);
});
//4.只获取多选框，每个选中的value值
$("#btn4").click(function () {
//var $checkboxs=$(":checkbox:checked");
var $checkboxs=$("input:checked");
//都可，前面必须要加以限制，否则只用checked还会获得下拉列表select里选中的内容
//法一：老式遍历
for (var i=0;i<$checkboxs.length;i++){
alert( $checkboxs[i].value );
}
//Dom对象
//法二：each方法是jQuery对象提供用来遍历元素的方法
$checkboxs.each(function () {
alert( this.value );
});//在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
});
//5.获取下拉框选中的内容
$("#btn5").click(function () {
var $options=$(":selected");
// var $options = $("select option:selected"); 一样
$options.each(function () {
//alert( this.value );
alert( this.innerHTML );
}); //二者效果是一样的
});
});
</script>