如何使用jquery在网格视图中获取所选单选按钮的值

How to get the value of selected radiobutton in gridview using jquery

本文关键字：单选按钮 获取 jquery 何使用 网格 视图      更新时间：2023-09-26

我正在研究wijgrid，我已经为html表单提供了一个单选按钮。我已经使用 jquery 来获取单选按钮的值，它在表单上不可见，但它没有显示在网格上。

我想在选择单选按钮时获取参数码的值，该值应显示在 wijgrid 上。我的代码工作正常，它显示了值，但是当我保存表单的数据时，它不接受网格内的单选按钮值。

请帮忙...谢谢蒂娜！！

这是我的JSON（为了易读性而重新格式化，但实际上缩小了）：

{
    "jsonWrapperforGrid": {
        "page": "1",
        "total": "2",
        "rows": [
            {
                "tenantId": 0,
                "paramType": "UserGender",
                "paramCode":"F", 
                "langCode":"en", 
                "paramValue":"Female"
            },
            {
                "tenantId": 0,
                "paramType": "UserGender",
                "paramCode": "M",
                "langCode": "en",
                "paramValue": "Male", 
                "paramBlob": ""
            }
        ]
    }
}

这是我的jQuery脚本：

<script type="text/javascript">
$.ajax({ 
    url: "UserGender",
    type: "GET",
    dataType: "json",
    contentType : "application/json",
    success: function (responce) { 
        if (responce.jsonWrapperforGrid.rows.length > 0) {
            $.each(responce.jsonWrapperforGrid.rows, function (i, entity) {  
                $('#gencom01').append(
                    $('<label />', { 'for': 'gender' + entity.paramValue,
                                     'text': entity.paramValue }),
                    $('<input />', { 'id': 'gender' + entity.paramCode,
                                     'type': 'radio', 
                                     'name': 'gender', 
                                     'value': entity.paramValue })
                    .click(function() {
                        var inputValue = $('input:radio:[name=+"gendernew"]:checked').val(entity.paramCode);
                        $("#gencom").val(entity.paramCode );
                    })
                );
            });
        }
    }
});
</script>

这是我的 HTML：

<body>  
  <div id="gencom01">
    <td><input id="gencom" style="width:205px ;" name="gendernew">
  </div>
</body>

这真的是你的所有代码吗？如果你开始在加载时进行 ajax 调用，也许你可以在服务器端处理它？但你可能有你的理由。

首先，您需要使用 $(document).ready(); 事件，您无法开始将内容附加到可能尚未在您的 DOM 中的标签中。

你的if语句if (responce.jsonWrapperforGrid.rows.length > 0)是无用的，如果长度为0，你的.each（）循环将不做任何事情，之前不需要测试。

然后更糟糕的是，你开始在 .append（） 中声明一个 .click（），虽然它可能有效，但这看起来有点奇怪，并且可能是许多错误的根源。通常更容易调试以保持 DOM 操作和事件分开。并使用 .on（），这是最新的。

我不知道您的 AJAX 调用背后的技术，但将您的 JSON 解析为真正的 JS 对象会有所帮助： var jsonData = $.parseJSON(responce);

因此，最好尽可能少地使用 .append（），在循环中使用它可能需要时间。我建议将数据保存在变量中，只有在循环结束时，您才能附加所有内容。

而且我不知道这个<td>在你的<div>里做什么.

这是您的代码的外观，我无法测试任何东西，因为我不知道您的 JSON 是什么样子的：

$(document).ready(function()
{
    $.ajax({ 
        url: "/mgw/pankanis/admin/SysParameter?Paramtype=UserGender",
        type:"GET",
        dataType: "json",
        contentType : "application/json",
        success: function (responce)
        {
            var jsonData = $.parseJSON(responce);
            var toAppend = "";
            $.each(jsonData.jsonWrapperforGrid.rows,function(i,entity)
            {
                toAppend += '<label for="gender'+entity.paramValue+'">'+entity.paramValue+'</label>';
                toAppend += '<input id="gender'+entity.paramCode+'" type="radio" name="gender" value="'+entity.paramValue+'">';
            });
            $('#gencom01').append(toAppend);
            $("#gencom01 input:not(#gencom)").on("click",function()
            {
                $("#gencom").val($(this).attr("id").substr(6)); // entity.paramCode
            })
        }
    });
});
相关文章：