作者:zccst
二、jQuery动态改变表单
[b]1,操作select[/b]
a. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
b. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
c. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
d. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
e. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
f. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
[b]2,操作input=text[/b]
[b]3,操作input=radio[/b]
// 检查radio是否有被选中
var $item = $(“:radio[id='idname']:checked”);
var len=$item.length;
if(len==0) alert(“没有选中”);
// raido选中值
$(“:radio[id='idname']:checked”).val();
// 设定radio选项取消选中
$(“:radio[id='idname']:checked”).attr(“checked”,false);
//value=34的radio被选中
$(“input[name=test][value=34]“).attr(“checked”,true);
//value=34的radio被选中
$(“input[id=testid][value=34]“).attr(“checked”,true);
批注:对于布尔值,最好使用prop替换attr
//使之无效
$(“:radio[id='idname']”).prop("disabled",true);
[b]4,操作input=checkbox[/b]
一、jQuery收集表单值
1,收集checkbox的值
2,radio表单
3,收集select的值
二、jQuery动态改变表单
[b]1,操作select[/b]
a. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
b. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
c. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
d. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
e. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
f. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
[b]2,操作input=text[/b]
[b]3,操作input=radio[/b]
// 检查radio是否有被选中
var $item = $(“:radio[id='idname']:checked”);
var len=$item.length;
if(len==0) alert(“没有选中”);
// raido选中值
$(“:radio[id='idname']:checked”).val();
// 设定radio选项取消选中
$(“:radio[id='idname']:checked”).attr(“checked”,false);
//value=34的radio被选中
$(“input[name=test][value=34]“).attr(“checked”,true);
//value=34的radio被选中
$(“input[id=testid][value=34]“).attr(“checked”,true);
批注:对于布尔值,最好使用prop替换attr
//使之无效
$(“:radio[id='idname']”).prop("disabled",true);
[b]4,操作input=checkbox[/b]
一、jQuery收集表单值
1,收集checkbox的值
<script type="text/javascript">
$(function() {
//全选
$("#checkAll").click(function() {
$("[name='items']:checkbox").attr("checked", true);
});
//反选
$("#checkOpp").click(function() {
$("[name='items']:checkbox").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
//全不选
$("#checkNO").click(function() { $("[name='items']:checkbox").attr("checked", false); });
//选中指定值
$("#SubmitID").click(function() {
var Str = "你选中的是:\n\r";
$("[name='items']:checkbox:checked").each(function() {
Str += $(this).val() + "\n\r";
});
alert(Str);
});
});
</script>
//我的获取办法
var str_general="";
$("input[name='cb_general_create']:checkbox:checked").each(function(){
str_general += $(this).val()+";";
})
//我的获取办法2,
var div = $("#content_"+type);
div.find(":checkbox:checked").each(function(){
str_general += $(this).val()+";";
})
//达到toggle效果
$("input[name='cb_expect_datetime']:checkbox").click(function(){
if($("input[name='cb_expect_datetime']:checkbox").attr("checked") == true){
//$("input[name='cb_expect_datetime']:checkbox").attr("checked",true);
$("#repair_attach_zone").show();
}else{
//$("input[name='cb_expect_datetime']:checkbox").attr("checked",false);
$("#repair_attach_zone").hide();
}
});
2,radio表单
<input type="radio" id="cb_expect_datetime" name="cb_expect_datetime" value="repairAtOnce" />
立即报修至厂商
<input type="radio" id="cb_expect_datetime" name="cb_expect_datetime" checked="checked" value="repairBatch" />
由库管集中报修
$("input[name='cb_expect_datetime']:radio").click(function(){
if($("input[name='cb_expect_datetime']:checked").val() == 'repairAtOnce'){
$("#repair_attach_zone").show();
}else{
$("#repair_attach_zone").hide();
}
});
//设置radio某个值为默认
$("input[@type=radio][name=sex][@value=1]").attr("checked",true);
3,收集select的值
//一、获取value值(最基本)
//value
var work_area = $("#outsource_work_area").val();
//text
var s_idc_name = $("#dropdownlist_s_idc_id").find("option:selected").text();
//或
var s_idc_name = $("#dropdownlist_s_idc_id option:selected").text();
//设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值
//设置select 选中的value:
$("#ddlRegType ").attr("value","Normal“);
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;
//二、操作option
//1,获取option对象
var option = $("#scheduling_user_id option[value="+user_id+"]");
var display_name = option.text();
option.remove();
//2,添加Option项:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
//3,删除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
$("#select_id").length= 0;//清空所有option
//三、遍历option
var id = $(this).attr("user_id");
var name = $(this).attr("display_name");
var len = $("select[name='scheduling_user_id'] option").length;
var flag = true;
$("select[name='scheduling_user_id'] option").each(function(){
if(id == $(this).val()){
flag = false;
}
});
if(flag){
var new_option = "<option value='"+id+"'>"+name+"</option>";
$(new_option).appendTo("#scheduling_user_id");
$("#new_item_"+id).remove();
}
//四、事件监听
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发