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

时间:2017-08-08 17:12:17

标签: javascript jquery html forms checkbox

我有一个很难的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实现类似的效果。)

1 个答案:

答案 0 :(得分:1)

在客户端创建阵列的方法基于使用:

$('#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>