【问题标题】:How to select all inputs having same name and index them by their name如何选择具有相同名称的所有输入并按名称索引它们
【发布时间】:2016-01-05 14:29:09
【问题描述】:

我必须处理由第三方生成的表单。此表单提供了一些复选框“多选”属性。但是输入名称是相同的,PHP $_POST 不能处理相同的键(只处理最后一个数据)。

这是一个表格示例:

<form>
    <input type="checkbox" name="attr1" value="1" />
    <input type="checkbox" name="attr1" value="2" />
    <input type="checkbox" name="attr1" value="3" />
    <input type="checkbox" name="attr1" value="4" />
    <input type="checkbox" name="attr2" value="xx" />
    <input type="checkbox" name="attr3" value="a" />
    <input type="checkbox" name="attr3" value="b" />
    <input type="checkbox" name="attr3" value="c" />
    <input type="checkbox" name="attr3" value="d" />
    <input type="text" name="attr4" value="" />
</form>

我想解析所有复选框输入,只获取一组同名输入,并将“[]”附加到它们的名称...

jQuery 处理后我想得到什么:

<form>
    <input type="checkbox" name="attr1[]" value="1" />
    <input type="checkbox" name="attr1[]" value="2" />
    <input type="checkbox" name="attr1[]" value="3" />
    <input type="checkbox" name="attr1[]" value="4" />
    <input type="checkbox" name="attr2" value="xx" />
    <input type="checkbox" name="attr3[]" value="a" />
    <input type="checkbox" name="attr3[]" value="b" />
    <input type="checkbox" name="attr3[]" value="c" />
    <input type="checkbox" name="attr3[]" value="d" />
    <input type="text" name="attr4" value="" />
</form>

有没有办法识别同名的输入组?

【问题讨论】:

  • 您是否有理由使用 JavaScript 执行此操作而不是直接修改标记?我猜你不介意疏远禁用 JS 的用户,对吗?
  • 此 HTML 表单由第三方提供(由 XSL 转换的 XML),我不想修改提供的 XSL(它是版本化的,我从 web 服务中获取)。你说得对,我不处理 JS 禁用用户(它不是公共网站,而是在线服务应用程序)。

标签: jquery jquery-selectors


【解决方案1】:

如果存在另一个具有相同名称的项目,这会将[] 附加到每个复选框项目的名称。

var name_map = {};
$("input[type=checkbox]")  // for all checkboxes
    .each(function() {  // first pass, create name mapping
        var name = this.name;
        name_map[name] = (name_map[name]) ? name + "[]" : name;
    })
    .each(function() {  // replace name based on mapping
        this.name = name_map[this.name];
    });

演示:http://jsfiddle.net/gnfsG/

【讨论】:

  • 不错! +1 一个简单的解决方案:)
  • 谢谢,这正是我需要的!
【解决方案2】:

试试这个:

var group = $('input[name="attr1"]');

if (group.length > 1){
   group.each(function () {
        $(this).attr("name",$(this).attr("name")+"[]");
   });
}

【讨论】:

  • 我只想匹配具有同名兄弟姐妹的输入,而不是所有输入。不知道有没有可能……
  • 你能详细解释一下吗?只喜欢复选框?在我的回答中,我正在使用 :checkbox 选择器更改仅复选框控件的名称。
  • 我想更改名称,仅当输入具有同名的兄弟姐妹时。这就是您的解决方案不完美的原因;)
【解决方案3】:

在您的情况下,您需要使用$('input[name^="attr"]')。因为您的项目有attr1attr2attr3 等。上面的选择器将匹配所有。

你可以在@http://jsfiddle.net/cT78Y/2/查看这个操作

$('input[name^="attr"]:checkbox').each(function(i){
   $(this).attr("name",$(this).attr("name")+"[]");
});

这会给你。

<form>
  <input type="checkbox" name="attr1[]" value="1">
  <input type="checkbox" name="attr1[]" value="2">
  <input type="checkbox" name="attr1[]" value="3">
  <input type="checkbox" name="attr1[]" value="4">
  <input type="checkbox" name="attr2[]" value="xx">
  <input type="checkbox" name="attr3[]" value="a">
  <input type="checkbox" name="attr3[]" value="b">
  <input type="checkbox" name="attr3[]" value="c">
  <input type="checkbox" name="attr3[]" value="d">
  <input type="text" name="attr4" value="">
</form>

希望对你有所帮助。

【讨论】:

    【解决方案4】:

    这是一个很长的解决方案

    var array =[];
                    $('input[type="checkbox"]').each(function(){
                        array.push($(this).attr('name'));
                    });
    
                    var sorted_arr = array.sort(); // You can define the comparing function here.
                    // JS by default uses a crappy string compare.
                    var results = [];
                    for (var i = 0; i < array.length - 1; i++) {
                        if (sorted_arr[i + 1] == sorted_arr[i]) {
                            results.push(sorted_arr[i]);
                        }
                    }
                    var names = [];
                    names = jQuery.unique(results);
                    $.each(names ,function(key,value){
                        $('input[name ="'+value+'"]').attr("name",value+"[]");
                    });
    

    【讨论】:

      【解决方案5】:
      $("input[name=attr\\[\\]]");
      

      获取 name = attr[] 的所有输入

      【讨论】:

        猜你喜欢
        • 2016-07-05
        • 2020-03-19
        • 2023-02-03
        • 2022-07-13
        • 2019-11-11
        • 1970-01-01
        • 2014-04-23
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多