master

分支 (1)

管理

管理

master

front-end-development-learning
/
jquery操作表单.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="./lib/jquery-2.1.0.min.js" type="text/javascript" r></script>
</head>
<body>
	<input id="test-input" name="email" value="test">

    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
    <div>
    	<label> r1 <input type="radio" name="r1" value="r1" class="ra"></label>

    	<label> r2 <input type="radio" name="r1" value="r2" class="ra"></label>
    </div>

   	<div>
   		<button id="btn">修改radio选中状态</button>
   	</div>


<script>
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');
    radio = $("input[name=r1]")

console.log(input.val()); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

console.log(select.val()); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

console.log(textarea.val()); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

console.log(radio) //jq对象
console.log(radio[1]) //dom对象
console.log(radio.get(0)==radio[0]) //true
radio.each((index,item)=>{
	console.log(item) //dom对象
	if($(item).val()=="r1"){  //让第一个radio选中
		$(item).prop("checked",true)
	}
})
$("#btn").click(function(){

	// radioChecked = radio.find(":checked")//空，find是查找子元素
	radioChecked = radio.filter(":checked")//获得选中的radio,filter是过滤当前的元素
	radioUnChecked = radio.filter(":not(:checked)") //选择未选中的radio,:not为反向选择器
	// console.log(radioUnchecked)
	if(radioChecked){
		// radioChecked.prop("checked",false)
		radioUnChecked.prop("checked",true)
	}


})
</script>
</body>
</html>