关于form表单获取值和设置值得方法

html代码

 <form action="" name='fm'>
        <div>
            文本框demo:<br>
            <input class="firstname" type="text" name="firstname" value="hellow">
        </div>
        <br>
        <br>
        <div>
            单选框demo:<br>
            <label for=""><input type="radio" class="Sex" name="Sex" value="女" checked="checked" />女</label>
            <label for=""><input type="radio" class="Sex" name="Sex" value="男" />男</label>
        </div>

        <br>
        <br>
        <div>
            复选框demo:<br>
            <label for="">粉色<input class="checkbox" type="checkbox" name="color" value="粉色"></label>
            <label for="">红色<input class="checkbox" type="checkbox" name="color" value="红色"></label>
        </div>
        <br>
        <br>

        <div>

            下拉列表demo:<br>
            <select name="cars" class="option" id="op">
                <option value="volvo" selected="selected">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>
        </div>
        <br>
        <br>

        <input type="submit" value="Submit">
    </form>

一、如何设置

 

设置input的值

$(".firstname").val('小仙女')

 

设置radio的值

通过下标设置选中

 $(".Sex").get(1).checked = true;

 $("input[name='Sex']").get(1).checked = true;

 $("input[name='Sex']:eq(1)").attr("checked", 'checked');

 通过value设置选中

 $("[name='Sex'][value='男']").prop("checked", "checked");

 $(".Sex[value='男']").prop("checked", "checked");

设置option的值

通过value设置选中

$(".option").val("saab");

通过text设置选中

$(".option").find("option:contains('Saab')").attr("selected", true);

通过下标设置选中

 $(".option").get(0).selectedIndex = 1;

 

设置checkbox的值

 

通过value设置选中

$(".checkbox[value='红色']").prop("checked", true);

通过下标设置选中

$(".checkbox").get(1).checked = true;

设置checkbox全选

$(".checkbox").prop("checked", true);

 

二、如何获取

1.通过类名或者id属性取值

获取input框里的值

 console.log($(".firstname").val())

获取单选框里的值

($(".Sex:checked").val()
$('input:radio:checked').val()；
   
$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

获取下拉列表里选中的值

console.log($(".option").val())

console.log($(".option option:selected").val())

获取下拉列表里选中的文本值

console.log($(".option option:selected").text())

console.log($(".option").find("option:selected").text());

获取下拉列表里选中的下标

$(".option").get(0).options.selectedIndex

 

2.通过name属性取值

获取input框里的值

console.log($("input[name='firstname']").val())

获取单选框里的值

console.log($("input[name='Sex']:checked").val())

 

3、通过表单获取值

获取input框里的值

console.log(fm.firstname.value)

获取单选框里的值

console.log(fm.Sex.value)

获取下拉列表里的值

console.log(fm.cars.value)

 

三、获取复选框里的值

字符串拼接

text = $('input[name="color"]:checked').map(function (index, elem) {
            return $(elem).val();
        }).get().join(',');

数组

 text = $('input[name="color"]:checked').map(function (index, elem) {
            return $(elem).val();
        }).get();