jquery遍历checkbox

最新推荐文章于 2024-08-16 07:30:39 发布

原创最新推荐文章于 2024-08-16 07:30:39 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqery #ajax #遍历 #checkbox #json

C# 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML表单元素，选中特定输入项，并通过AJAX发送请求到指定URL。重点展示了如何获取用户选择的元素值，并利用$.ajax方法进行数据交互。

    <script>
        $(function () {
            $("#subJT").click(function () {
                $("#table input[name='name'][type='checkbox']:checked").each(function () {
                    alert($(this).val());
                    //这里可以调用ajax
                    $.ajax({
                        url: "XXXX.aspx/xxxx",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify({ id: $(this).val()}), 
                        success: function (result) {
                        },
                        error: function (result) {
                            msgError("错误！");
                        }
                    });
                });
            });
        });
    </script>

    <div id="table">
    <table style=" width:500px; line-height:2em;">
        <tr>
            <td>是否显示</td><td>选择</td>
        </tr>
        <tr>
            <td>货品名称</td>
            <td>
                <input type="checkbox"  name="name" value="p_col_1" />
            </td>
        </tr>
          <tr>
            <td>货品颜色</td>
            <td>
                <input type="checkbox" name="name" value="p_col_2" />
            </td>
        </tr>
          <tr>
            <td>货品型号</td>
            <td>
                <input type="checkbox" name="name" value="p_col_3" />
            </td>
        </tr>
          <tr>
            <td>货品规格</td>
            <td>
                <input type="checkbox" name="name" value="p_col_4" />
            </td>
        </tr>
    </table>
        <input type="button" name="name" value="sub" id="subJT" />
    </div>

使用前先引入jquery