如何使用 JS 或 jQuery 从组复选框名称数组中检索引用

Posted

技术标签:

【中文标题】如何使用 JS 或 jQuery 从组复选框名称数组中检索引用【英文标题】:How to retrieve references from group Checkbox name arrays using JS or jQuery 【发布时间】:2018-01-16 09:03:19 【问题描述】:

我有一个难解的 JS/jQuery 之谜!很难,因为我在 Google 和这里​​都找不到它,现在也找不到,几个月前我之前也在找它。

一个大型框架在表格中使用复选框:

<table class="ListTable">
  <tr>
    <td><input name="blnChecked[70_20]" type="checkbox" value="1" id="some_unusable_gobbledy_gook" /></td>
    <td></td>...
  </tr>
  <tr>
    <td><input name="blnChecked[71_20]" type="checkbox" value="1" id="some_more_unusable_gobbledy_gook" /></td>
    <td></td>...
  </tr>
  <tr>
    <td><input name="blnChecked[70_25]" type="checkbox" value="1" id="some_further_unusable_gobbledy_gook" /></td>
    <td></td>...
  </tr>
</table>

我现在需要将所有复选框名称 references 收集到一个数组中:在上面的示例中为 70_20、71_20 和 70_25。然后加入它们,并将它们作为 URL 参数提交到不同的页面(尽管这种加入对我的问题不是必需的)。

问题:在同一页面上使用 JS/jQuery,如何从数组中这些(选中)复选框中的名称字符串中获取这些引用?

我不喜欢使用正则表达式(对于这样一个看似微不足道的事情,有点凌乱,或者“矫枉过正”),尽管这样的解决方案不在我的考虑范围内。

(如果有人问为什么表格的结构是这样的:这不是我做的。但是我可以看到,当这样一个表格,其中这个表格被提交到一个 php 页面时,PHP 将所有这些复选框存储到一个单数组,很不错,我想用JS/jQuery实现类似的效果。)

【问题讨论】:

你尝试过简单的&lt;form method="POST" action="example.com"&gt;&lt;/form&gt; 我不知道您为什么建议这样做:我要求使用 JS/jQuery 检索值,而不是如何将其提交到 PHP 文件。当然,它会检索值,但它不会回答我的问题,也不会回答我发出 GET 请求(不是 POST)的问题。 我问是因为你的问题不清楚。您说“如何在数组中获取这些引用”,但那是 javascript 数组还是 PHP 数组?另外,给定 html 输入,输出应该是什么? 它是我想要的 JS 数组。我对问题进行了一些修改以使其更清晰,并删除了一些偏离主题的部分。 【参考方案1】:

一种在客户端创建数组的方法是基于使用:

.map() 字符串.replace()

$('#btn').on('click', function(e) 
    var retVal = $('table.ListTable :checkbox[name^="blnChecked["]:checked').map(function(idx, ele) 
        //
        // if the name value has always the same format...
        //
        return ele.name.replace('blnChecked[', '').replace(']', '');
        //
        // or....
        //
        // return ele.name.split('[').pop().replace(']', '');
        // return ele.name.substr(11, 5);
        //return ele.name.replace(/blnChecked\[(.*?)\]/g, '$1')
    ).get();
    var param = $.param('param': retVal.join(','));
    console.log('Array: ' + retVal);
    console.log('URL param: ' + param);
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="ListTable">
    <tr>
        <td><input name="blnChecked[7125_2355]" type="checkbox" value="1" id="some_unusable_gobbledy_gook" /></td>
        <td></td>
    </tr>
    <tr>
        <td><input name="blnChecked[71_20]" type="checkbox" value="1" id="some_more_unusable_gobbledy_gook" /></td>
        <td></td>
    </tr>
    <tr>
        <td><input name="blnChecked[70_25]" type="checkbox" value="1" id="some_further_unusable_gobbledy_gook" /></td>
        <td></td>
    </tr>
</table>

<button type="button" id="btn">Click Me</button>

【讨论】:

非常好!这回答了这个问题,但你正在使用一些我希望避开的重型坦克 是的,我可以通过 substr 看到这一点。但是,您将不得不使用 substr 两次(以摆脱最后一个 ] ),这两种可能性同样混乱。 但是如果 name="blnChecked[7125_2355]" 呢?这些引用不是恒定的。你之前的回答更好。 @FlorianMertens 我的最后一个建议是双重替换:ele.name.replace('blnChecked[', '').replace(']', '') 让我知道 记录一下:我曾希望有一个 JS/jQuery gem 可以自动解析名称(如 $("input[name=blnChecked]").name() 或类似的),像 PHP 一样。这个解决方案确实回答了这个问题,但我有点绊倒,它并不像明显的那么容易。

以上是关于如何使用 JS 或 jQuery 从组复选框名称数组中检索引用的主要内容,如果未能解决你的问题,请参考以下文章

如何从组的 LDAP 搜索中获取用户给定名称属性的列表?

使用 JS 或 Jquery 将复选框和单选的值添加到标签

如果选中,则更改复选框旁边的文本。 HTML + JS 或 jQuery [关闭]

选择带有名称[] 和值的复选框(jquery/javascript)

Oracle SQL:如何从组中查找记录

如何使用 JavaScript 或 jquery 选中/取消选中复选框?