Question

我有一个表单，其中包含一些用于创建地址簿的输入字段。如果用户想要添加另一组名称，则可以单击添加更多名称。如果用户使用相同的用户名，而不是一遍又一遍地输入，我添加了一个复选框。

如果用户选中该复选框，它会将第一个用户名输入字段中的值传递给所有用户名输入字段。

下面的代码适用于第二组输入字段，但是当我点击添加更多字段时，它不会传递值。

$('#check1, #addmore').click(function(){
    if (this.checked) {
        $('.pass').val($('.original').val());
    }
});

这是完整的code。

Answer 1

您可以使用已经分配给按钮的类.add_field_button类。然后，只要检查#check1元素，就可以将值分配给每个输入框值，其id以username开头。

//changed the selector, you already had this class present in your markup
$('.add_field_button').on(
"click",function(){

    //if the check1 checkbox is checked
    if ($("#check1").is(":checked")) {


         /*select every id that starts with "username" and sets it value
           to the .original input text box value*/
         $("[id^=username]").val($(".original").val());


    }
});

在审核了你的jsfiddle后，我发现了一些其他错误：

您在JavaScript中使用html评论。您需要使用或// for single line comments进行多行评论，而不是/* my comment */。

删除评论语法错误后，我可能在使用原始答案时遇到了一些意外行为。 if then语句仍然适用，但我将其移到了add_more按钮事件中，因为它只是在添加第三组输入后克隆了用户名。

直播示例：http://codepen.io/larryjoelane/pen/rxKZYm?editors=1010

更新了JavaScript：

    $(document).ready(function() {

  Number.prototype.pad = function(size) {
    var s = String(this);
    while (s.length < (size || 0)) {
      s = "0" + s;
    }
    return s;
  }

  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var c = 9;
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      c++;
      $(wrapper).append('<div><label><span>Template Id :</span><input type="text" name="templateid' + x + '" id="templateid' + x + '"></label><br><label><span>UNC Path :</span><input type="text" name="uncpath' + x + '" id="uncpath' + x + '"></label><br><label><span>Username :</span><input type="text" class="pass" name="username' + x + '" id="username' + x + '"></label><br><label><span>Password :</span><input type="text" name="password' + x + '" id="password' + x + '"></label><br><label><span>Name :</span><input type="text" name="scantoname' + x + '" id="scantoname' + x + '"></label><a href="#" class="remove_field btn btn-primary">Remove</a></div>'); //add input box

      /*add input value to 'how many field*/
      $.each($('input[name="howmany[]"]'), function() {

        $(this).val(x);
      });

      /*add input value to 'templateid field*/
      $('input[name="templateid' + x + '"]').each(function() {
        $(this).val((x).pad(3, 0));
      });

    }

    //////////added code////////////////
    //if the check1 checkbox is checked
    if ($("#check1").is(":checked")) {

      /*select every id that starts with "username" and sets it value
       to the .original input text box value*/
      $("[id^=username]").val($(".original").val());

    }
    //////////added code////////////////

  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

Answer 2

首先，您需要将ID #addmore添加到HTML

中的按钮

<button id="addmore" class="add_field_button btn btn-primary">Add More</button>

然后只需修改您的点击功能：

$('#check1, #addmore').click(function(){
    if($('#check1').is(':checked')) {
         $('.pass').val($('.original').val());
    }
});

Jquery，将输入值传递给克隆的输入字段

2 个答案: