Jquery 读取表单选中值

时间：2023-01-28 08:44:34

1、获取复选框的选中值

<title> JS 获取复选框选中的值</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="checkbox" value="01" class="ck" />

<input type="checkbox" value="02" class="ck" />

<input type="checkbox" value="03" class="ck" />

<input type="checkbox" value="04" class="ck" />

<input type="checkbox" value="05" class="ck" />

<input type="button" value="取选中" 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="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="checkbox" value="01" class="ck" />

<input type="checkbox" value="02" class="ck" />

<input type="checkbox" value="03" class="ck" />

<input type="checkbox" value="04" class="ck" />

<input type="checkbox" value="05" class="ck" />

<input type="button" value="取选中" 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="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="radio" value="01" class="rd" name="a" />

<input type="radio" value="02" class="rd"name="a" />

<input type="radio" value="03" class="rd" name="a" />

<input type="radio" value="04" class="rd" name="a"/>

<input type="radio" value="05" class="rd" name="a"/>

<input type="button" value="取单选" 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="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="checkbox" id="qx" />全选

<input type="checkbox" value="01" class="ck" />01

<input type="checkbox" value="02" class="ck" />02

<input type="checkbox" value="03" class="ck" />03

<input type="checkbox" value="04" class="ck" />04

<input type="checkbox" value="05" class="ck" />05

<input type="button" value="取多选" 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="jquery-1.11.2.min.js"></script>

</head>

<body>

<select id="sel">

    <option value="11111">aaaaa</option>

    <option value="22222">bbbbb</option>

    <option value="33333">ccccc</option>

</select>

<input type="button" value="取下拉" id="b1" />

<script type="text/javascript">

    $("#b1").click(function(e) {

       alert ($("#sel").val());

    });

</script>

相关文章