首页 > 代码库 > JQuery操作select checkbox radio总结

JQuery操作select checkbox radio总结

JQuery是一个很强大的工具所以我要找到它最便捷的方法,嘻嘻

Select 增删改查:

Select查:
1.val值:
$("#selectid").val();       //最方便的
2.text值:
$("#selectid option:selected").text();       //最方便的
或 $("#selectid").find("option:selected").text()
3.Index值:
$("#selectid").get(0).selectedIndex;              //最方便的

Select改:
1.val值:
$("#selectid").val("xxx");               //最方便的
或 $("#selectid").attr("value","xxx");
2.text值:
$("#selectid option[text=abc]").attr("selected",true);              //最方便的
或 $("selectid option:contains(xxx)").attr("selected",true);
3.index值:
$("#select option[index=1]").attr("selected",true);                  //最方便的

Select增:
$("#selectid").append($("<opiton value=http://www.mamicode.com/‘0‘>张三")); //这两个都挺常用
$("#selectid").prepend($("<opiton value=http://www.mamicode.com/‘0‘>张三"));

Select删:
清空:$("#selectid").empty();     //一般的插入前都会清空
部分删:
    $("#selectid option:gt(0)").remove();    //因为第一行有时候是tHead 的情况清空
    $("#selectid option[value=http://www.mamicode.com/xxx]").remove();
       $("#selectid option[text=xxx]").remove();
       $("#selectid option[index=xxx]").remove();
select选中 不选中
$("#selectid").attr("selected",true);   
$("#selectid").attr("selected",false);

Radio查:
$("#radioid").val();
$("#radioid[name=xxx]").val();
$("#radioid[id=xxx]").val();
Radio改:
$("radioid[value=http://www.mamicode.com/xxx]").attr("checked",true);
$("radioid:eq(1)").attr("checked",true);
Radio删:
$("radioid").remove();

Checkbox查:
$("#checkboxid").val();
$("#checkboxid[name=xxx]").val();
$("#checkboxid[id=xxx]").val();
Checkbox改:
$("checkboxid[value=http://www.mamicode.com/xxx]").attr("checked",true);
$("checkboxid:eq(1)").attr("checked",true);
$(":button").bind("click",function(){              
   $(":checkbox").each(function(){
     //$(this).attr("checked",!$(this).attr("checked"));       点击按钮checkbox反选;
     //$(this).attr("checked",true);       点击按钮checkbox全选;
     $(this).attr("checked",false);       点击按钮checkbox全不选;
     //if($(this).attr("checked")==true){alert($(this).val())}         选中的值
     //if($(this).attr("checked")==false){alert($(this).val())}        没选中的值
    })
  })
 })
Checkbox删:
$("checkboxid").remove();


txt文本框查:
$("#txtid").val();
txt文本框改:
$("#txtid").val("xx");
txt文本框删:
$("#txtid").val("");


jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关
获 取一组radio被选中项的值
var item = $(‘input[name=items][checked]‘).val();
获 取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
select下拉框的第二个元素为当前选中值
$(‘#select_id‘)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[name=items]‘).get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框 checkbox:$("#checkbox_id").attr("value");
单选组radio:   $("input[type=radio][checked]").val();
下拉框select: $(‘#sel‘).val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",‘‘);//清空内容
$("#txt").attr("value",‘11‘);//填充内容
多选框checkbox: $("#chk1").attr("checked",‘‘);//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr(‘checked‘)==undefined) //判断是否已经打勾
单选组 radio:    $("input[type=radio]").attr("checked",‘2‘);//设置value=http://www.mamicode.com/2的项目为当前选中项
下拉框 select:   $("#sel").attr("value",‘-sel3‘);//设置value=http://www.mamicode.com/-sel3的项目为当前选中项
$("<option value=http://www.mamicode.com/‘1‘>1111").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框