jquery收集表单值及操作表单

作者：zccst

二、jQuery动态改变表单
1，操作select

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





2，操作input=text



3，操作input=radio
// 检查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);




4，操作input=checkbox







一、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" />
立即报修至厂商&nbsp;&nbsp;&nbsp;&nbsp;
<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添加事件，当选择其中一项时触发