首页 > 代码库 > Jquery 读取表单选中值

Jquery 读取表单选中值

2024-08-22 02:09:02   223人阅读

1、获取复选框的选中值

<title> JS 获取复选框选中的值</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>

</head>

<body>
<input type="checkbox" value="http://www.mamicode.com/01" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/02" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/03" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/04" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/05" class="ck" />
<input type="button" value="http://www.mamicode.com/取选中" id="btn"  />

<script type="text/javascript">
    
    $("#btn").click(function(e) {
        var ck = $(".ck");
        for(var i=0;i<ck.length;i++ )
        {
            if(ck[i].checked)
            {
                alert (ck[i].value);
            }
        }
    });

</script>

JQUERY

<title> JQUERY 获取复选框选中的值</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>

</head>

<body>
<input type="checkbox" value="http://www.mamicode.com/01" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/02" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/03" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/04" class="ck" />
<input type="checkbox" value="http://www.mamicode.com/05" class="ck" />
<input type="button" value="http://www.mamicode.com/取选中" id="btn"  />

<script type="text/javascript">
    
    $("#btn").click(function(e) {
        var ck = $(".ck");
        for(var i=0;i<ck.length;i++ )
        {
            if(ck.eq(i).prop("checked"))
            {
                alert (ck.eq(i).val());
            }
        }
    });

</script>

2. JQUERY 取单选框的选中值

<title> JQUERY 取单选框的选中值</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="radio" value="http://www.mamicode.com/01" class="rd" name="a" />
<input type="radio" value="http://www.mamicode.com/02" class="rd"name="a" />
<input type="radio" value="http://www.mamicode.com/03" class="rd" name="a" />
<input type="radio" value="http://www.mamicode.com/04" class="rd" name="a"/>
<input type="radio" value="http://www.mamicode.com/05" class="rd" name="a"/>
<input type="button" value="http://www.mamicode.com/取单选" id="b2"  />

<script type="text/javascript">
    
    $("#b2").click(function(e) {
        var B = $(".rd");
        for(var i=0;i<B.length;i++)
        {
            if(B.eq(i).prop("checked"))
            alert (B.eq(i).val());
        }
    });

</script>

3. JQUERY 取复选框选中的值，这里不能用attr()，会出现Bug,所以会用prop()属性，然后将自身的状态再给到复选框

<title>JQUERY 取复选框选中的值</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>

</head>

<body>
<input type="checkbox" id="qx" />全选
<input type="checkbox" value="http://www.mamicode.com/01" class="ck" />01
<input type="checkbox" value="http://www.mamicode.com/02" class="ck" />02
<input type="checkbox" value="http://www.mamicode.com/03" class="ck" />03
<input type="checkbox" value="http://www.mamicode.com/04" class="ck" />04
<input type="checkbox" value="http://www.mamicode.com/05" class="ck" />05
<input type="button" value="http://www.mamicode.com/取多选" id="btn"  />

<script type="text/javascript">

    $("#qx").click(function(e) {
        var xz = $(this).prop("checked");
        $(".ck").prop("checked",xz);
    });
</script>

 4.JQUERY获取下拉列表的选中值

<title> JQUERY 获取下拉列表的选中值</title>
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>

</head>
<body>

<select id="sel">
    <option value="http://www.mamicode.com/11111">aaaaa</option>
    <option value="http://www.mamicode.com/22222">bbbbb</option>
    <option value="http://www.mamicode.com/33333">ccccc</option>
</select>
<input type="button" value="http://www.mamicode.com/取下拉" id="b1" />
<script type="text/javascript">

    $("#b1").click(function(e) {
       alert ($("#sel").val());
    });
</script>

 

Jquery 读取表单选中值


联系
我们