JQuery用于取消选中和选中复选框的干燥代码

JQuery dry code for uncheck and check checkboxes

本文关键字:代码 用于 取消 JQuery 复选框      更新时间:2023-09-26

我有一个jquery代码,用于检查/取消选中和启用/禁用复选框,但代码写得不太好,因为我必须复制并粘贴相同的代码来区分不同div容器中的复选框,有什么方法可以用一个函数调用代码吗?,我还是jquery的新手,所以我对保持jquery代码写得很好/很高效或很枯燥一无所知,这是jquery代码:

//for container sales toggle show/hide
$('#show_hide_sales').click(function (e) {
  $('#show_hide_sales').closest("#sales").find(".row:gt(0)").slideToggle("fast");
  var val = $(this).text() == "-" ? "+" : "-";
  $(this).hide().text(val).fadeIn("fast");
  e.preventDefault();
});
$('#sales').each(function(){//loop through each container,must have different name of classes or id
$('#sales').find ($('#row_sales:first')).each(function(){ // get first row (header), need different row id name for this one line
    $('#title_sales').click(function(){ //if text header clicked,must have different name of classes or id
      var cur = $(this).closest('.row').closest('#sales').find(".row:gt(0)").find('div:eq(1)').find('input'); //get first column checkboxes
      if(!$(cur).prop('checked')){
           $(cur).closest('.row').find('div:gt(1) input').prop("disabled", false);
           $("input[id^='auth2']").each(function(){
                $(this).prop("checked",true);
           });
      }else{
        $(cur).closest('.row').find('div:gt(1) input').prop("disabled", true);
        $("input[id^='auth2']").each(function(){
               $(this).prop("checked",false);
        });
    }
    });
    $('#sales_add').click(function(){//must have different name of classes or id for add, edit, and delete
      var cur = $(this).closest('#sales').find(".row:gt(0)").find('div:eq(2)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='addAuth2']").each(function(){
               $(this).prop("checked",true);
        });
      }else{
        $("input[id^='addAuth2']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    $('#sales_edit').click(function(){
      var cur = $(this).closest('#sales').find(".row:gt(0)").find('div:eq(3)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='editAuth2']").each(function(){
                 $(this).prop("checked",true);
        });
      }else{
        $("input[id^='editAuth2']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    $('#sales_del').click(function(){
      var cur = $(this).closest('#sales').find(".row:gt(0)").find('div:eq(4)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='delAuth2']").each(function(){
                 $(this).prop("checked",true);
        });
      }else{
        $("input[id^='delAuth2']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    });
  });
//for container inventory toggle show/hide
$('#show_hide_inventory').click(function (e) {
  $('#show_hide_inventory').closest("#inventory").find(".row:gt(0)").slideToggle("fast");
  var val = $(this).text() == "-" ? "+" : "-";
  $(this).hide().text(val).fadeIn("fast");
  e.preventDefault();
});
$('#inventory').each(function(){//loop through each container,must have different name of classes or id
$('#inventory').find ($('#row_inventory:first')).each(function(){ // get first row (header), need different row id name for this one line
    $('#title_inventory').click(function(){ //if text header clicked,must have different name of classes or id
      var cur = $(this).closest('.row').closest('#inventory').find(".row:gt(0)").find('div:eq(1)').find('input'); //get first column checkboxes
      if(!$(cur).prop('checked')){
           $(cur).closest('.row').find('div:gt(1) input').prop("disabled", false);
           $("input[id^='auth3']").each(function(){
                $(this).prop("checked",true);
           });
      }else{
        $(cur).closest('.row').find('div:gt(1) input').prop("disabled", true);
        $("input[id^='auth3']").each(function(){
               $(this).prop("checked",false);
        });
    }
    });
    $('#inventory_add').click(function(){//must have different name of classes or id for add, edit, and delete
      var cur = $(this).closest('#inventory').find(".row:gt(0)").find('div:eq(2)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='addAuth3']").each(function(){
               $(this).prop("checked",true);
        });
      }else{
        $("input[id^='addAuth3']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    $('#inventory_edit').click(function(){
      var cur = $(this).closest('#inventory').find(".row:gt(0)").find('div:eq(3)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='editAuth3']").each(function(){
                 $(this).prop("checked",true);
        });
      }else{
        $("input[id^='editAuth3']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    $('#inventory_del').click(function(){
      var cur = $(this).closest('#inventory').find(".row:gt(0)").find('div:eq(4)').find('input');//get first column checkboxes
      if(!$(cur).prop('checked')){
        $("input[id^='delAuth3']").each(function(){
                 $(this).prop("checked",true);
        });
      }else{
        $("input[id^='delAuth3']").each(function(){
               $(this).prop("checked",false);
        });
      }
    });
    });
  });

以下是运行程序JSFiddle 的示例

因此,我已将您的代码从大约123行减少到大约25行。用以下代码替换您的Javascript。完全相同的功能(但如果我错过了什么,请在下面评论!!(

$(function() {
  function retObj(name){ return {name: name, data:[false],options: [['add',false], ['edit',false], ['del',false]]};}
  var containers = [ retObj('sales'), retObj('inventory')];
  containers.forEach(function(container) {
    $("#show_hide_"+ container.name).click(function(){
      $('#'+container.name).children("div:not(#row_"+container.name+")").slideToggle('fast');
      this.innerHTML = (this.innerHTML === '+')? '-': '+';
    });   
    $("#title_" + container.name).click(function(){
      container.data[0] = !container.data[0];
      $('#'+container.name).find("[id^=auth]").each(function() {
          $(this).prop("checked", container.data[0]);
        });
    });
    var options = container.options;
    options.forEach(function(option) {
      $("#"+container.name+"_" + option[0]).click(function() {
        option[1] = !option[1];
        $('#'+container.name).find("[id^=" + option[0] + "Auth]").each(function() {
          $(this).prop("checked", option[1]);
        });
      });
    });
  });
});

更新的FIDDLE我刚刚替换了Javascript代码:http://jsfiddle.net/t758jod6/1/


在此处运行的工作SNIPET本身:

$(function() {
  function retObj(name){ return {name: name, data:[false],options: [['add',false], ['edit',false], ['del',false]]};}
  var containers = [ retObj('sales'), retObj('inventory')];
  containers.forEach(function(container) {
    $("#show_hide_"+ container.name).click(function(){
      $('#'+container.name).children("div:not(#row_"+container.name+")").slideToggle('fast');
      this.innerHTML = (this.innerHTML === '+')? '-': '+';
    });   
    $("#title_" + container.name).click(function(){
      container.data[0] = !container.data[0];
      $('#'+container.name).find("[id^=auth]").each(function() {
          $(this).prop("checked", container.data[0]);
        });
    });
    var options = container.options;
    options.forEach(function(option) {
      $("#"+container.name+"_" + option[0]).click(function() {
        option[1] = !option[1];
        $('#'+container.name).find("[id^=" + option[0] + "Auth]").each(function() {
          $(this).prop("checked", option[1]);
        });
      });
    });
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container-fluid" id="sales">
  <div class="row" id="row_sales">
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <p id="show_hide_sales">-</p>
    </div>
    <div class="col-sm-4" style="background-color:#4ABDAC;">
      <P id="title_sales">Sales</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="sales_add">ToogleAdd</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="sales_edit">ToogleEdit</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="sales_del">ToogleDel</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth200" value="auth200" id="auth200">New Member Invoice</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth200" value="addAuth200" id="addAuth200">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth200" value="editAuth200" id="editAuth200">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth200" value="delAuth200" id="delAuth200">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth201" value="auth201" id="auth201">Member Invoice Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth201" value="addAuth201" id="addAuth201">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth201" value="editAuth201" id="editAuth201">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth201" value="delAuth201" id="delAuth201">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth202" value="auth202" id="auth202">New Stockiest Invoice</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth202" value="addAuth202" id="addAuth202">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth202" value="editAuth202" id="editAuth202">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth202" value="delAuth202" id="delAuth202">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth203" value="auth203" id="auth203">Stockiest Invoice Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth203" value="addAuth203" id="addAuth203">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth203" value="editAuth203" id="editAuth203">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth203" value="delAuth203" id="delAuth203">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth204" value="auth204" id="auth204">New Shipment</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth204" value="addAuth204" id="addAuth204">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth204" value="editAuth204" id="editAuth204">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth204" value="delAuth204" id="delAuth204">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth205" value="auth205" id="auth205">Shipment Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth205" value="addAuth205" id="addAuth205">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth205" value="editAuth205" id="editAuth205">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth205" value="delAuth205" id="delAuth205">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth206" value="auth206" id="auth206">Invoice & Shipment Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth206" value="addAuth206" id="addAuth206">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth206" value="editAuth206" id="editAuth206">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth206" value="delAuth206" id="delAuth206">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth207" value="auth207" id="auth207">Daily Sales Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth207" value="addAuth207" id="addAuth207">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth207" value="editAuth207" id="editAuth207">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth207" value="delAuth207" id="delAuth207">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth208" value="auth208" id="auth208">PV Group Report (Gen)</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth208" value="addAuth208" id="addAuth208">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth208" value="editAuth208" id="editAuth208">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth208" value="delAuth208" id="delAuth208">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth209" value="auth209" id="auth209">PV Group Report (Tree)</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth209" value="addAuth209" id="addAuth209">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth209" value="editAuth209" id="editAuth209">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth209" value="delAuth209" id="delAuth209">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth210" value="auth210" id="auth210">Preproses PV Group (Gen)</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth210" value="addAuth210" id="addAuth210">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth210" value="editAuth210" id="editAuth210">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth210" value="delAuth210" id="delAuth210">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth211" value="auth211" id="auth211">Product Sales Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth211" value="addAuth211" id="addAuth211">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth211" value="editAuth211" id="editAuth211">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth211" value="delAuth211" id="delAuth211">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth212" value="auth212" id="auth212">Monthly Sales Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth212" value="addAuth212" id="addAuth212">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth212" value="editAuth212" id="editAuth212">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth212" value="delAuth212" id="delAuth212">Delete</input>
    </div>
  </div>
</div>
<div class="container-fluid" id="inventory">
  <div class="row" id="row_inventory">
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <p id="show_hide_inventory">-</p>
    </div>
    <div class="col-sm-4" style="background-color:#4ABDAC;">
      <P id="title_inventory">Inventory</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="inventory_add">ToogleAdd</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="inventory_edit">ToogleEdit</p>
    </div>
    <div class="col-sm-1" style="background-color:#4ABDAC;">
      <P id="inventory_del">ToogleDel</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth300" value="auth300" id="auth300">Inventory Trx Entry</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth300" value="addAuth300" id="addAuth300">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth300" value="editAuth300" id="editAuth300">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth300" value="delAuth300" id="delAuth300">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth301" value="auth301" id="auth301">Product Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth301" value="addAuth301" id="addAuth301">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth301" value="editAuth301" id="editAuth301">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth301" value="delAuth301" id="delAuth301">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth302" value="auth302" id="auth302">Product Package Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth302" value="addAuth302" id="addAuth302">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth302" value="editAuth302" id="editAuth302">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth302" value="delAuth302" id="delAuth302">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth303" value="auth303" id="auth303">Product Selling Price</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth303" value="addAuth303" id="addAuth303">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth303" value="editAuth303" id="editAuth303">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth303" value="delAuth303" id="delAuth303">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth304" value="auth304" id="auth304">Pricing Code</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth304" value="addAuth304" id="addAuth304">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth304" value="editAuth304" id="editAuth304">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth304" value="delAuth304" id="delAuth304">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth305" value="auth305" id="auth305">Trx Type Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth305" value="addAuth305" id="addAuth305">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth305" value="editAuth305" id="editAuth305">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth305" value="delAuth305" id="delAuth305">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth306" value="auth306" id="auth306">WareHouse Maintenance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth306" value="addAuth306" id="addAuth306">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth306" value="editAuth306" id="editAuth306">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth306" value="delAuth306" id="delAuth306">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth307" value="auth307" id="auth307">Inventory Trx Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth307" value="addAuth307" id="addAuth307">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth307" value="editAuth307" id="editAuth307">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth307" value="delAuth307" id="delAuth307">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth308" value="auth308" id="auth308">Inventory Balance Stock Report</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth308" value="addAuth308" id="addAuth308">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth308" value="editAuth308" id="editAuth308">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth308" value="delAuth308" id="delAuth308">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth309" value="auth309" id="auth309">Product Listing</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth309" value="addAuth309" id="addAuth309">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth309" value="editAuth309" id="editAuth309">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth309" value="delAuth309" id="delAuth309">Delete</input>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-4">
      <input type="checkbox" name="auth310" value="auth310" id="auth310">History Stock Balance</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="addAuth310" value="addAuth310" id="addAuth310">Add</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="editAuth310" value="editAuth310" id="editAuth310">Edit</input>
    </div>
    <div class="col-sm-1">
      <input type="checkbox" name="delAuth310" value="delAuth310" id="delAuth310">Delete</input>
    </div>
  </div>
</div>
</body>
</html>

我假设您的HTML无法编辑(或者您不想编辑(。如果可以的话,那么我们可能可以调整HTML,并使JS代码更加甜美(或干燥(