<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jquery简单的input操作</title>
</head>
<body>
<div><input type="text" id="text" /></div>
<div>
<input type="checkbox" name="abc" value="checkbox1" id="in1" checked="checked" /><label for="in1"
>一年级</label
>
<input type="checkbox" name="abc" value="checkbox2" id="in2" /><label for="in2">二年级</label>
<input type="checkbox" name="abc" value="checkbox3" id="in3" /><label for="in3">三年级</label>
</div>
<div>
<input type="radio" value="radio1" name="radioName" />1
<input type="radio" value="radio2" name="radioName" />2
</div>
<div>
<select id="select">
<option value="select1">select1</option>
<option value="select2">select2</option>
<option value="select3">select3</option>
</select>
</div>
<button id="setBtn">设置值</button>
<button id="getBtn">获取值</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 获取值
$('#getBtn').click(function () {
var chk_value = [];
$('input[name="abc"]:checked').each(function () {
chk_value.push($(this).val());
});
console.log(
$('#text').val(),
chk_value,
$('input[name="radioName"]:checked').val(), // $("input[type='radio']:checked").val()
$('#select').val(), // 获得被选中的项的值 $('#select option:selected').val()
$('#select option:selected').text() // 获得被选中的项的文本
);
});
// 设置值
$('#setBtn').click(function () {
$('#text').val('张三');
$('input:checkbox').eq(0, 1, 2).attr('checked', 'true'); // $('input:checkbox').slice(0,2).attr('checked','true'); // $("input:checkbox[value='1']").attr('checked','true');
$("input[name='radioName'][value=radio1]").prop('checked', true);
$('#select').val('select2'); // $("#select option[value='select2']").attr('selected', true);
// $("#select").empty(); 清空选项值 $("#test option[text='select2']").remove()
});
</script>
</body>
</html>
|