Question

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Add Skill</label>
  <div class="col-md-6 col-sm-3 col-xs-12">
    <input  type='text' id='others' name='others' class="form-control col-md-7 col-xs-3"/>
    <button type='submit' onclick='btn2' value='Add' class="btn btn-success"></button>
  </div>
</div>

这是我想要的代码，当我点击按钮时，它会创建一个新的chekbox

Answer 1

您必须在success请求的AJAX回调中在运行时添加复选框

试试这个：

 $.ajax({
      url : 'fila path',
      type: 'POST',
      data: data,
      success : function(response){ 
           $('#list').append("<input type='checkbox' name='checkboxname'/><br>");
      }
  });

Answer 2

您需要使用ajax success回调函数添加复选框。

$(function() {
  $('#btn2').on('click', function() {
    // paste the below code in your success callback
    $('<input type="checkbox" name="chkItem" />').insertBefore(this);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Add Skill</label>
  <div class="col-md-6 col-sm-3 col-xs-12">
    <input type='text' id='others' name='others' class="form-control col-md-7 col-xs-3" />
    <button type='button' id='btn2' value='Add' class="btn btn-success">Add</button>
  </div>
</div>

以上代码段将帮助您添加复选框。我在简单的按钮上添加了复选框，您可以使用ajax代码对其进行修改。希望这会对你有所帮助。

使用ajax代码更新，

$(function() {
    $('#btn2').on('click', function() {
       var self=this;
       $.ajax({
           url:'your_server_url',
           type:'POST', // let it is POST method
           success:function(response){
              $('<input type="checkbox" name="chkItem" />')
                    .insertBefore(self); // insert before your clicked button
           }
       });
    });
});

Answer 3

$("#addCheckBox").on("click",function(){
    $.ajax({
            url : 'Url to get the ajax response',
            dataType: "json",
            method: 'post',
        data: {
           data: data,
        },
         success: function( response ) {
         $('#others').append("<input type='checkbox' name="checkboxCreated"/>");
        }
        });
});

如何通过ajax点击按钮创建一个新的复选框？

3 个答案: