在克隆复选框字段后，使用jQuery获取(并更改）该字段的名称

Using jQuery to obtain (and change) the name of a checkbox field after it has been cloned?

本文关键字：字段 获取 复选框 jQuery 使用      更新时间：2024-02-04

我有一些代码正在尝试修改，以便获得复选框名称中的数字。

目标是点击几次后，代码就会变成这样的

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">Email
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">SMS
<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">Email
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">SMS
<input type="checkbox" name="UPDATE_METHOD[2][]" value="Email" checked="">Email
<input type="checkbox" name="UPDATE_METHOD[2][]" value="SMS" checked="">SMS

当前代码是…

HTML:

   <div class="clone_replicate_this_div_1">
        <input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">Email
        <input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">SMS
    </div>
        <div class="placer_1"></div>
        <a href="#" class="clone_trigger_button_1">Clone row 1</a>

jQuery:

$(document).ready(function(){
      $(".clone_trigger_button_1").click(function () {
                 // Group boxes in groups of 2
                var j = 0;
                $('[name="UPDATE_METHOD[0][]"]').prop('name', function(i, name) {
                    if (i%2==0) j++;
                    return name.split('[').shift() + '['+j+'][]';
                });
  $('.clone_replicate_this_div_1').last().clone().insertBefore(".placer_1");
                $('input.cl:last').val('');
                event.preventDefault();

      });
});

我试图获得最后一个UPDATE_METHOD[0][]的编号，将其指定为变量，然后加1。

jsFiddle在这里：http://jsfiddle.net/LCUTk/2/

谢谢你能提供的任何帮助。。。

试试这个

$(document).ready(function(){
      $(".clone_trigger_button_1").click(function () {
          var total = $('[name^="UPDATE_METHOD"]').length;
          var index = Math.round(total / 2);
          $('.clone_replicate_this_div_1').last().clone().insertBefore(".placer_1");
          $('input.cl:last').val('');
          $('.clone_replicate_this_div_1').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]");
          event.preventDefault();  
      });
});

实时演示

JSFIDDLE

HTML:

<div class="placer_1"></div>
<a href="#" class="clone_trigger_button_1">Clone row 1</a>
<script type="text/template" id="template">
<div class="clone_replicate_this_div_1">
    <input class="email" type="checkbox" checked="checked" />
    <label class="email_label">Email</label>
    <input class="sms"   type="checkbox" checked="checked" />
    <label class="sms_label">SMS</label>
</div>
</script>

JavaScript:

$(document).ready(function(){
    var html = $('#template').html(),
        placer = $( '.placer_1' ),
        index = 0,
        createInputs = function(){
            var div = $( html ),
                name = 'UPDATE_METHOD[' + index +  '][]';
            $( '.email', div ).attr( 'name', name )
                              .attr( 'id', 'update_method_email_' + index );
            $( '.sms',   div ).attr( 'name', name )
                              .attr( 'id', 'update_method_sms_' + index );
            $( '.email_label', div )
                              .attr( 'for', 'update_method_email_' + index );
            $( '.sms_label',   div )
                              .attr( 'id', 'update_method_sms_' + index );
            placer.before( div );
            ++index;
            console.log( index );
        };
    $(".clone_trigger_button_1").click(function ( evt ) {
        createInputs();
        evt.preventDefault();
    });
    createInputs();
});

这个解决方案很奇怪，但一直对我有效。

$(document).ready(function(){
var counter = 1 ;
$(".clone_trigger_button_1").click(function () {
    var newObject = '<div class="clone_replicate_this_div_1"><input type="checkbox" name="UPDATE_METHOD[' + counter + '][]" value="Email" checked="">Email<input type="checkbox" name="UPDATE_METHOD[' + counter + '][]" value="SMS" checked="">SMS</div>' ;
    $(newObject).insertBefore(".placer_1");
    counter++ ;
    event.preventDefault();
});
});
相关文章：