一、jQuery---操作 radio
补充知识：
二、jQuery---操作 checkbox
<body>
<div class="checkbox">
<input type="checkbox" name="checkbox_name" id="handlAll" value="#">全选/全不选 <br>
<input type="checkbox" name="checkbox_name" id="handlReverse" value="#">反选 <br>
<input type="checkbox" name="checkbox_name" class="inp_checkbox" id="checkbox_name" value="muzi">muzi <br>
<input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="digbig">digbig <br>
<input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="muzidigbig">muzidigbig <br>
<input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="lucky">lucky <br>
</div>
</body>
<script src="./js/jquery-3.3.1.js"></script>
<script>
/*
$('.inp_checkbox').click(function(){
//点击哪个元素获取哪个元素的值
var _thisVal = $(this).val();
console.log(_thisVal)
})
*/
// 2、设置选中项(:checkbox 匹配所有复选框)
$("input[name='checkbox_name']:checkbox:eq(3)").attr("checked","checked");
// 3.设置checkbox的value属性的值:
$('#checkbox_name').click(function(){
$(this).attr("value","jiji");
});
// 4.全选/全不选
var checkAll = [];
$('#handlAll').click(function(){
if($(this).prop('checked') === true){
$('.inp_checkbox:checkbox').prop('checked',true);
$('.inp_checkbox:checkbox').each(function(index,domEle){
checkAll.push($(domEle).val())
});
console.log(checkAll);
}else{
$('input[type="checkbox"]').prop('checked',false);
checkAll.length = 0;
console.log(checkAll);
}
})
//获取被选中的checkbox的值并添加到数组中，取消选项后从数组中移除：
$('.inp_checkbox').click(function(){
if($(this).prop('checked') == true){
checkAll.push($(this).val());
console.log(checkAll)
}else{
checkAll.splice(checkAll.indexOf($(this).val()),1);
console.log(checkAll);
}
})
//5.反选(在什么都不选时也可满足全选/全不)
$('#handlReverse').click(function(){
if($(this).prop('checked') === true){
$('.inp_checkbox:checkbox').each(function(index,domEle){
if($(domEle).prop('checked') == true){
$(domEle).prop('checked',false);
}else{
$(domEle).prop('checked',true);
}
})
}else{
$('.inp_checkbox:checkbox').each(function(index,domEle){
if($(domEle).prop('checked') == true){
$(domEle).prop('checked',false);
}else{
$(domEle).prop('checked',true);
}
})
}
})
/*
// 6.获取被选中的checkbox的值并添加到数组中，取消选项后从数组中移除：
var selValue = [];
$('.inp_checkbox').click(function(){
if($(this).prop('checked') == true){
selValue.push($(this).val());
console.log(selValue)
}else{
selValue.splice(selValue.indexOf($(this).val()),1);
console.log(selValue);
}
})
*/
</script>三、jQuery---操作 select
<body>
<select name="" id="sel_name">
<option value="muzi">muzi</option>
<option value="digbig">digbig</option>
<option value="muzidigbig">muzidigbig</option>
</select>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$('#sel_name').change(function(){
// 1.获取选中项：
// 获取选中项的Value值：(:selected 匹配所有选中的option元素)
var selOpt;
// selOpt = $('select#sel_name option:selected').val();
// 或者
// selOpt = $('select#sel_name').find('option:selected').val();
// 获取选中项的Text值：
selOpt = $('select#sel_name option:selected').text();
// 或者
// selOpt = $('select#sel_name').find('option:selected').text();
// 2.获取当前选中项的索引值：(selectedIndex 返回被选中的选项的下标。obj.selectedIndex)
var optIndex = $('select#sel_name').get(0).selectedIndex;
})
// 3.获取当前option的最大索引值：
var maxIndex = $('select#sel_name option:last').attr("index");
console.log(maxIndex)
// 4.获取DropdownList的长度：(get([index]) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。)
//length 返回 Select 对象下选项的数目。 obj.length // obj.options.length
var optLength = $('select#sel_name')[0].options.length;
// 或者
var optLength = $('select#sel_name').get(0).options.length;
console.log(optLength);//3
// 5.设置第一个option为选中值：
$('select#sel_name option:first').attr('selected','true')
// 或者
$('select#sel_name')[0].selectedIndex = 0;
</script>补充知识：
javascript中select中options的属性
Select 选择区（下拉列表）对象 由“<select id="select_id">”指定。 obj =getrElementById('select_id')属性
length 返回 Select 对象下选项的数目。 obj.length // obj.options.length
selectedIndex 返回被选中的选项的下标。obj.selectedIndex
这个下标就是在 options[ ] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
form 返回包含本元素的表单对象。 obj.options[x].form
方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
事件
onchange
options[ ];
Option 选择项对象 options[ ] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。
Option 对象由“<select>”下的“<options>”指定。
options[ ] 数组的属性：
1.length;
2.selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value 返回/指定 Option 对象的值，与<options value="...">一致。
index 返回该Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected 返回/指定 该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
默认选中可以这样写
<option selected="selected" value="" ></option>
<option selected value="" ></option>
defaultSelected 返回该对象默认是否被选中。true / false。
若有不足请多多指教！希望给您带来帮助！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
