如何基于复选框更改jQgrid？

Question

我有jQgrid，并希望允许用户通过复选框或单选按钮选择要在页面上显示的那个。

我不能只将其部分放置，因为它位于 script 标记中。

有什么办法可以做到这一点？

更新：

我有这两个jQgrid

jQuery("#datatable").jqGrid({
              url: "/user/details",
              serializeGridData: function(data) {
                  var Data = jQuery.extend(data, {
                      _search: "true",
                      date_from: function() { return jQuery("#date_from").val(); },
                      date_to: function() { return jQuery("#date_to").val();
                  });
                  return jQuery.param(Data);
              },
              ajaxGridOptions: {async: true},
              ajaxCellOptions: {async: true},
              ajaxRowOptions: {async: true},
              mtype: "POST",
              datatype: "local",
              overlay: "false",
              jsonReader: {repeatitems: false},
              pager: '#grid',
              rowEdit: true,
              colNames:['id','Name','Surname', 'Age', 'Company'],
              colModel:[
                  {name:'id',key:true,hidden:true,width:0,index:'id', sorttype:"int", editable: false, align:'left',search:true},
                  {name:'name',width:175,sortable:true, align:'left',search:true},
                  {name:'surname',fixed:true,width:250,sortable:true, align:'left',search:true},
                  {name:'age',width:0,index:'item_code', sorttype:"int", editable: false, align:'left',search:true},
                  {name:'company',width:300,sortable:true, align:'left',search:true},
              ],

                  jQuery('[id^="gs"]').attr("placeholder", "Search...");
              },
              rownum:500,
              rowNum:500,
              rowList:[500, 1000],
              shrinktofit: true,
              forcefit: false,
              autowidth:true,
              sortname: 'projects',
              sortorder: "desc",
              height: "380",
              ignoreCase: true,
              viewrecords: true,
              caption:""
        }

和

jQuery("#datatable").jqGrid({
              url: "user/settings",
              serializeGridData: function(data) {
                  var newPostData = jQuery.extend(data, {
                      _search: "true",
              ajaxGridOptions: {async: true},
              ajaxCellOptions: {async: true},
              ajaxRowOptions: {async: true},
              mtype: "POST",
              datatype: "local",
              overlay: "false",
              jsonReader: {repeatitems: false},
              loadonce: false,
              pager: '#grid',
              rowEdit: true,
              colNames:['id','User','Settings'],
              colModel:[

               {name:'id',key:true,hidden:true,width:0,index:'id', sorttype:"int", editable: false, align:'left',search:true},
               {name:'user',fixed:true,width:1450,sortable:true, 
               align:'left',search:true},
               {name:'settins',fixed:true,width:1450,sortable:true, align:'left',search:true},

              rownum:500,
              rowNum:500,
              rowList:[500, 1000],
              shrinktofit: true,
              forcefit: false,
              autowidth:true
                 }

和2个复选框

<input type="checkbox" class="value">
<input type="checkbox" class="value">

问题是如何基于这两个chekbox渲染这两个jQgrid：

这意味着如果选中复选框1，将显示第一个jQuery网格，如果选中复选框2，将显示第二个jQuery网格，依此类推