Question

我想通过ajax响应创建单选按钮。以下是我目前的代码，

function loadPaymentMethods(){
    var baseURL = "<?php echo site_url('student/payment_methods'); ?>";
    var controllerURL = baseURL;
      $.ajax({
          url : controllerURL,
          type : 'POST',
          data:{},
          success : function(data){
              alert(data); 

              for(var i=0;i<response.length;i++){
                //create 2 radio buttons here by looping

             }
         }
        });
}

alert(data);此输出如下，

[{"id":"1","name":"full"},{"id":"2","name":"part"}]

我想循环响应并在代码中创建单选按钮。并希望默认选择第一个无线电按钮。

请帮助我！

Answer 1

只需将单选按钮作为html插入到您需要的html元素中。

在foreach循环中：

$('#yourelement').html('<input type="radio" checked name="'+ i +'" id="'+ i +'"/>');

Answer 2

在你的回复中这样做：

var response = data;

      for(var i=0;i<response.length;i++){
        $('<input type="radio" name="myradio" id="'+i+'"    
                value="'+response[i].name+'">').appendTo($("#home"));
        }

Answer 3

使用jQuery.parseJSON()

注意：

1）您作为数据获取响应但是您尝试 response.length 看看这个

＆＃13;

var obj = jQuery.parseJSON( '[{"id":"1","name":"full"},{"id":"2","name":"part"}]' );
var JJ ="";
var p =1;
$.each(obj,function(i,v)
{
  if(p==1){ concat ="checked"; }else{ concat="" }

 JJ+='<input type="radio" '+concat+' name="'+ v.name +'" id="'+ v.name +'" value="'+ v.id +'"/><br>';
 p++;
});

$('#ss').html(JJ);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ss">

</div>

＆＃13;

Answer 4

在这个答案中，只检查了fisrt收音机

var obj = jQuery.parseJSON( '[{"id":"1","name":"full"},{"id":"2","name":"part"}]' );
var radio_html ="";
var count = 0;
$.each(obj,function(i,v){

  if(count == 0){
    radio_html =radio_html+'<input type="radio" checked name="'+ i +'" id="'+ i +'"/> <span>Radio '+i+'</span><br>';
  }else{
    radio_html =radio_html+'<input type="radio" name="'+ i +'" id="'+ i +'"/><span>Radio '+i+'</span><br>';
  }
 
 count++;
});

$('#home').html(radio_html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">

</div>

Answer 5

添加id =“myDiv”的潜水。这将是代码（将其添加到成功块）：

$("document").ready(function () { 
            
            var data = [{id:"1", name:"part"},{id:"2", name:"full"}]
            var $myDiv = $("#myDiv");
              
            for(var i=0;i<data.length;i++){
                //create 2 radio buttons here by looping
                $myDiv.append('<input type="radio" id="' + data[i].id + '" name="' + data[i].name + '" />');
            }
            
            $('#myDiv input[type=radio]:first').attr('checked', 'checked');
        })

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </head>
<body>
    <div id="myDiv"></div>
</body>
</html>

Answer 6

var arr = [{"id":"1","name":"full"},{"id":"2","name":"part"}],
    html = '';

arr.forEach(function (el, index) {
  var checked = !index ? 'checked="checked"' : '';
  html += '<div>' +
    '<input type="radio" name="select" id="'+el.id+'" value="'+el.id+'" '+checked+'>' +
    '<label for="'+el.id+'">'+el.name+'</label>' +
  '</div>';
});

$('#result').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

通过ajax响应创建单选按钮

6 个答案: