試圖動態添加複選框不顯示UI中的值，但在控制檯中顯示

我試圖動態地添加複選框的值。我能夠看到控制檯中的值，像這樣在哪裏，它顯示只有在page.This複選框是我的代碼。試圖動態添加複選框不顯示UI中的值，但在控制檯中顯示

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="row text-center" > 
 
<div style="width:30%;" id="cblist" ></div> 
 

 
</div> 
 

 
<input type="button" value="AddCheckbox" id="btnSave" /> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('#btnSave').click(function() { 
 
     addCheckbox(); 
 
    }); 
 
}); 
 

 
function addCheckbox(name) { 
 
    var container = $('#cblist'); 
 
    var inputs = container.find('input'); 
 
    var id = inputs.length+1; 
 
    $('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).html('hello').appendTo(container);  
 
} 
 

 
</script>

來源

2017-06-28 Hema Nandagopal

檢查答案。你的解決方案應該在那裏。 –

嘗試下面的代碼，它的工作..並相信這將有助於你......，我已經使用bootstape類，所以它會看起來很好&對齊..

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Demo</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <style type="text/css"> 
      .checkbox + .checkbox, .radio + .radio { 
       margin-top: 10px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 

      <br/><br/> 
      <input type="button" value="AddCheckbox" id="btnSave" /> 
      <input type="button" value="Display Checkbox value" id="displayBtn" /> 
      <br/><br/> 

      <div class="row text-center" > 
       <div class="col-md-12" id="cblist" ></div> 
      </div> 

     </div> 
    </body> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#btnSave').click(function() { 
       addCheckbox(); 
      }); 

      $('#displayBtn').click(function() { 
       displayValue(); 
      }); 
     }); 

     function addCheckbox(name) { 
      var container = $('#cblist'); 
      var inputs = container.find('input'); 
      var id = inputs.length+1; 

      $html = '<div class="checkbox col-md-4">'; 
      $html += '<label><input type="checkbox" name="cb[]" value="cb'+id+'" id="cb'+id+'">hello '+id+'</label>'; 
      $html += '</div>'; 

      container.append($html); 
     } 

     function displayValue(){ 

      $('input[type="checkbox"]:checked').each(function() { //Get the only checked item 
       console.log($(this).val()); 
      }); 

     } 
    </script> 
</html>

我有更新一些代碼...這顯示在檢查控制檯輸入值....，

來源

2017-06-28 13:42:31

嘿，太棒了！非常感謝:) –

哦！歡迎！這很棒！ –

我們解決了這個問題，但我很好奇爲什麼我沒有在頁面上獲得任何價值？任何想法？ –

你必須一個<label>每個複選框這樣

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<div class="row text-center" > 
<div style="width:30%;" id="cblist" ></div> 

</div> 

<input type="button" value="AddCheckbox" id="btnSave" /> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#btnSave').click(function() { 
     addCheckbox(); 
    }); 
}); 

function addCheckbox(name) { 
    var container = $('#cblist'); 
    var inputs = container.find('input'); 
    var id = inputs.length+1; 
    $('<input/>', { type: 'checkbox', id: 'cb'+id, value: 'cb'+id,class:'col-xs-4'}).text('hsssello').appendTo(container);  
    $('<label />', { 'for': 'cb'+id, text: 'label'+id, class:'col-xs-8' }).appendTo(container); 
} 

</script>

關聯

請注意，標籤包含引用特定複選框的for屬性。您Play圍繞我還創建了一個PLUNKR

來源

2017-06-28 13:34:16

是的，我試過這個。問題是，如果我添加標籤，那麼我沒有在一行中獲得3複選框。它將以列表格式添加。 –

檢查plunkr。它只是我在複選框和標籤中添加的引導班級 –

如果您仍有問題，請告知我。 –

試圖動態添加複選框不顯示UI中的值，但在控制檯中顯示

回答

相關問題