常用表单操作

一、select：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="select" value="B" class="select" name="selectName">
    <!--<option selected value="">请选择</option>-->
    <option value="A" url="http://www.baidu.com">第一个option</option>
    <option value="B" url="http://www.qq.com">第二个option</option>
    <!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>

<select class="select" value="B" name="selectName">
    <!--<option selected value="">请选择</option>-->
    <option value="C" url="http://www.163.com">第三个option</option>
    <option value="D" url="http://www.tmall.com">第四个option</option>
    <!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>

<button onclick="getSelectValue()">get Select</button>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //$("#select").val("B");//设置默认值
    //$("#select option:first").prop("selected", 'selected');//默认选中第一项
    $("#select").change(function(){
        var options=$("#select option:selected"); //获取选中的项
        console.log(options.val()); //拿到选中项的值
        console.log(options.text()); //拿到选中项的文本
        console.log(options.attr('url')); //拿到选中项的url值
        if(options.val()==''){
            alert('为空');
            return;
        }
    }); //为Select添加事件，当选择其中一项时触发

    $(".select").each(function(){
        console.log($(this).val());
    });

    $("select[name=selectName]").change(function(){
        $("select[name=selectName]").each(function(){
            console.log($(this).val());
        });
    });

    //获取选中的值
    function getSelectValue(){
        //获取单个select值
        alert($("#select").val());
        //获取多个select值
        $("select[name=selectName]").each(function(){
            console.log($(this).val());
        });
    }
</script>
</body>
</html>

二、radio：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label><input type="radio" name="sex" value="m" checked>男</label><!-- 设置默认选中 -->
<label><input type="radio" name="sex" value="f">女</label>

<button onclick="getSelectValue()">get Select</button>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //第三方按钮点击
    function getSelectValue(){
        var val = $('input[name="sex"]:checked').val();
        alert("选中的radio的值是：" + val);
    }

    //自身值改变
    $('input[type=radio][name=sex]').change(function() {

        if (this.value == 'm') {
            alert("我是男性！");
        }
        else if (this.value == 'f') {
            alert("我是女性！");
        }
    });

    //点击自身
    $('input[type=radio][name=sex]').click(function() {
        if ($(this).is(':checked')) {
            alert($(this).val() + '被选中！');
        }
        if (this.value == 'm') {
            alert("我是男性！");
        }
        else if (this.value == 'f') {
            alert("我是女性！");
        }
    });
</script>
</body>
</html>

三、checkbox：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input class="subject" name='subject' type="checkbox" value="Chinese" id="Chinese" /><label>语文</label>
<input class="subject" name='subject' type="checkbox" checked value="Math" id="Math"/><label>数学</label>
<input class="subject" name='subject' type="checkbox" checked="checked" value="English"/><label>英语</label>
<input class="subject" name='subject' type="checkbox" value="Sport"/><label>体育</label>

<button id="button1">get Select</button>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    //判断checkbox 是否选中
    alert($("#Math").is(":checked"));//选中，返回true，没选中，返回false

    //设置checkbox为选中状态
    $("#Chinese").prop("checked",true);

    //设置checkbox为不选中状态
    $("#id").prop("checked",false);

    $(".subject").click(function(){
        if($(this).is(":checked")){
            alert($(this).val() + '被选中了');
        }
    });

    //获取选中项的值
    $("#button1").click(function(){
        //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
        //意思是选择被选中的checkbox
        $.each($('.subject:checked'),function(){
            alert("你选了："+
                $('.subject:checked').length+"个，其中有："+$(this).val());
        });
    });
</script>
</body>
</html>

猜你喜欢