一、select下拉框
I：javascript方法
1：获取选中的值
F1:
var myselect=document.getElementById("test");或者var myselect = document.all["test"];
var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
myselect.options[index].value;
myselect.options[index].text;
F2:
var selectoptions = document.getElementById("select_id").options;
for(var i = 0 ; i<selectoptions.length;i++){
if(selectoptions[i].selected){
alert(selectoptions[i].value);
}
}
2：赋值
var select= document.getElementById("select_id");
- for(i=0;i<select.length;i++){//给select赋值
- if("selectValue"==select.options[i].value){
- select.options[i].selected=true
- }
- }
II：jquery方法（前提是已经加载了jquery库）
1:获取选中的值
F1:$("#select_id").val()
F2:var options=$("#test option:selected"); //获取选中的项。 alert(options.val()); //拿到选中项的值
F3:$("select[name='xxx']").find("option:selected").val()；//$("select[name='xxx']").find("option:selected").text()；
2：赋值
F1:$("#select_id").val("xx");
F2:$("#select_id").get(0).selectedIndex =1;
F3:$("#select_id").find("option[text='pxx']").attr("selected",true);
3：jQuery添加/删除Select的Option项：
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
二、单选框radio
I:javascript方法
1：获取选中的值
var radio = document.getElementsByName("radio_name");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
alert(radio[i].value)
}
}
2：赋值
var ridaolen=document.thisform.radio_name.length;
for(var i=0;i<ridaolen;i++){
if(sex==document.thisform.radio_name[i].value){
document.thisform.radio_name[i].checked=true
}
}
II:jquery方法
1、获取选中值：
F1:$("input:radio[name='radio_name']:checked").val();
F2:$("input[name='radio_name']:checked").val();
F3:$('input:radio:checked').val()；和$("input[type='radio']:checked").val();
2、判断单选框是否选中：$('input:radio[name="radio_name"]').is(":checked");//is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
3、赋值：$("input[name='radio_Name'][value=2]").attr("checked",true);
三、复选框checkbox
I：javascript方法
1：获取选中值
function getValue(){
var myCheckboxs= document.getElementsByName("myCheckbox");
var value;
for (i=0; i<myCheckboxs.length; i++){
if (myCheckboxs[i].checked){
if (!value){
value = myCheckboxs[i].value;
} else {
value += "," + myCheckboxs[i].value;
}
}
}
alert(value == undefined ? '' : value);
}
2:全选
function selectAll(){
var myCheckboxs = document.getElementsByName("myCheckbox");
for (i=0; i<myCheckboxs.length; i++){
myCheckboxs[i].checked = true;
}
}
3：反选
function selectOther(){
var myCheckboxs = document.getElementsByName("myCheckbox");
for (i=0; i<myCheckboxs.length; i++){
if (myCheckboxs[i].checked){
myCheckboxs[i].checked = false;
} else {
myCheckboxs[i].checked = true;
}
}
}
4：判断是否全选
function isSelectAll(){
var myCheckboxs = document.getElementsByName("myCheckbox");
for (i=0; i<myCheckboxs.length; i++){
if (!myCheckboxs[i].checked){
return false;
}
}
return true;
}
5：添加复选框
function addCheckbox(divId){
var otherCheckbox=document.createElement("input");
var myText=document.createTextNode("复选框text");
otherCheckbox.setAttribute("type","checkbox");
otherCheckbox.setAttribute("id","myCheckbox");
otherCheckbox.setAttribute("value","xxx");
var mydiv=document.getElementById(divId);
mydiv.appendChild(otherCheckbox);
mydiv.appendChild(myText);
}
II：jquery方法
1:获取单个checkbox选中项
F1:$("input:[name='ck']:checked").val();
F2:$("input:checkbox:checked").val();//$("input:[type='checkbox']:checked").val();
2:获取多个checkbox选中项
$("input:[name='ck']").each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3:赋值
(1)设置第一个checkbox 为选中值:
$('input:checkbox:first').attr("checked",'checked');
$('input:checkbox').eq(0).attr("checked",'true');
(2)设置最后一个checkbox为选中值:
$('input:checkbox:last').attr('checked', 'checked');
$('input:checkbox:last').attr('checked', 'true');
(3)根据索引值设置任意一个checkbox为选中值:
$('input:checkbox).eq(索引值).attr('checked', 'true');
$('input:checkbox').slice(1,2).attr('checked', 'true');
(4)根据Value值设置checkbox为选中值:
$("input:checkbox[value='1']").attr('checked','true');
4:删除
(1)删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
(2)删除第几个checkbox
$("input:checkbox").eq(索引值).remove();
5:遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
6:全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
7:全部取消选择
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});