radio 获取单选框选中的值
规则：
$("input[name='name名']:checked").val()
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<label><input type="radio" class="oneSel" name="oneSel" value="张道陵" checked />张道陵</label>
<label><input type="radio" class="oneSel" name="oneSel" value="张玄策" />张玄策</label>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$('button.btn').click(function(){
let oneSel = $("input[name='oneSel']:checked").val()
console.log(oneSel)
})
})
</script>
</html>
checkbox 获取多选框中选中的值
规则
方法1：
let arr = []
$("input[name='name的名字']:checked").each(function(){
arr.push()
})
let arrs = arr.toString()
方法2：
let arrs = $("input[name='name的名字']:checked").map(function(){return this.value}).get().toString()
注：toString() 可以改为 join(',') 方法
<!-- 获取多选框选中的值 -->
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张道陵">张道陵</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张玄策">张玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="王玄策">王玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="霍去病">霍去病</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="卫青">卫青</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广">李广</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广利">李广利</label>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$('button.btn').click(function(){
let moreSel = $("input[name='moreSel']:checked").map(function(){return this.value}).get().toString()
console.log(moreSel)
})
})
</script>
</html>
checkbox 判断多选框是否处于选中状态
语法：
$("input[name='name名称']").is(":checked")
有选中则返回 true
没有选中则返回 false
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张道陵">张道陵</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张玄策">张玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="王玄策">王玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="霍去病">霍去病</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="卫青">卫青</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广">李广</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广利">李广利</label>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$('button.btn').click(function(){
let isChecked = $("input[name='moreSel']").is(":checked")
console.log(isChecked)
})
})
</script>
</html>
input 输入框的节点获取
规则：
$("input[name='name名字']").val()
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<input type="text" name="inputVal" class="inputVal" />
<button class="btn">点击</button>
</body>
<script>
$(function() {
$("button.btn").click(function(){
let inputVal = $("input[name='inputVal']").val()
console.log(inputVal)
})
})
</script>
</html>
select 下拉框的选中值获取
规则：
$("select[name='name名称']").val()
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<select name="selectName">
<option value="张道陵">张道陵</option>
<option value="张玄策">张玄策</option>
<option value="李隆基">李隆基</option>
<option value="杨贵妃">杨贵妃</option>
<option value="多尔衮">多尔衮</option>
</select>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$("button.btn").click(function(){
let selectVal = $("select[name='selectName']").val()
console.log(selectVal)
})
})
</script>
</html>
form表单序列化serialize()
规则
$("form").serialize()
注：
1、onSubmit="return false " 可以阻止表单因为点击事件跳转
2、多选框的数据需要先进行序列化后递交给一个隐藏的input框
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<form onsubmit = "return false">
<label>姓名<input type="text" name="name" /></label>
<label>年龄<input type="text" name="age" /></label>
<label>学校<input type="text" name="school" /></label>
<label>地址<input type="text" name="address" /></label>
<label>父亲<input type="text" name="father" /></label>
<label>
<label><input type="checkbox" name="teacher" value="张道陵" />张道陵</label>
<label><input type="checkbox" name="teacher" value="张玄策" />张玄策</label>
<label><input type="checkbox" name="teacher" value="张翠山" />张翠山</label>
<label><input type="checkbox" name="teacher" value="张三丰" />张三丰</label>
</label>
<input type="hidden" name="teachers" />
<button class="btn">点击</button>
</form>
</body>
<script>
$(function() {
$("button.btn").click(function(){
let formData = $('form').serialize()
console.log(formData)
$.ajax({
url: '******',
data: formData,
success: function(){
}
})
})
$("input[name='teacher']").change(function(){
let teachers = $("input[name='teacher']:checked").map(function(){return this.value}).get().toString()
$("input[name='teachers']").val(teachers)
})
})
</script>
</html>
.attr() 属性设置 .removeAttr() 属性移除
<!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<button class="btn" id="btnClick">点击禁用自己</button>
<button class="cancelBtn" id="btnClick">点击取消禁用前一个按钮</button>
</body>
<script>
$(function() {
$(".btn").click(e=>{
$(e.currentTarget).attr('disabled','disabled')
})
$(".cancelBtn").click(()=>{
$(".btn").removeAttr('disabled')
})
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
