2017-08-06 58 views
-1

让我开始说,我看过非常类似的问题,是的;我已阅读并尝试实施建议的解决方案。我试图让它一次只能选中一个复选框。我看到的最常见的答案是这一个;一次一个复选框JavaScript

$('input.example').on('change', function() { 
    $('input.example').not(this).prop('checked', false); 
}); 

这个解决方案对我来说确实有效,但那是在我动态地创建我的表之前。这是我的代码目前。它通过JSON $ .post从MySQL表中提取表数据。

function load() { 
    $.post(
    "Returnsmedb.php", 
    function(response) { 
     var block = [] 
     index = 0; 
     for (var item in response) { 
     var objectItem = response[item]; 
     var firstname = objectItem.fname; 
     var lastname = objectItem.lname; 
     var username = objectItem.uname; 
     var email = objectItem.email; 
     var password = objectItem.password; 
     var deny = document.createElement("input"); 
     deny.type = "checkbox"; 
     deny.className = "chk"; 
     deny.name = "deny"; 
     deny.id = "deny"; 
     var approve = document.createElement("input"); 
     approve.type = "checkbox"; 
     approve.className = "chk"; 
     approve.name = "approve"; 
     var moreinfo = document.createElement("input"); 
     moreinfo.type = "checkbox"; 
     moreinfo.className = "chk"; 
     moreinfo.name = "moreinfo"; 

     block.push(firstname); 
     block.push(lastname); 
     block.push(username); 
     block.push(email); 
     block.push(password); 
     block.push(deny); 
     block.push(approve); 
     block.push(moreinfo); 

     dataset.push(block); 
     block = []; 
     } 

     var data = [" First Name", " Last Name ", " User Name ", " Email ", "Password", " Deny", "Approve", "More Information"] 

     tablearea = document.getElementById('usersTable'); 
     table = document.createElement('table'); 
     thead = document.createElement('thead'); 
     tr = document.createElement('tr'); 

     for (var i = 0; i < data.length; i++) { 
     var headerTxt = document.createTextNode(data[i]); 
     th = document.createElement('th'); 
     th.appendChild(headerTxt); 
     tr.appendChild(th); 
     thead.appendChild(tr); 
     } 

     table.appendChild(thead); 


     for (var i = 0; i < dataset.length; i++) { 
     tr = document.createElement('tr'); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); 
     tr.appendChild(document.createElement('td')); //Added for checkbox 
     tr.appendChild(document.createElement('td')); //Added for checkbox 
     tr.appendChild(document.createElement('td')); //Added for checkbox 


     tr.cells[0].appendChild(document.createTextNode(dataset[i][0])); 
     tr.cells[1].appendChild(document.createTextNode(dataset[i][1])); 
     tr.cells[2].appendChild(document.createTextNode(dataset[i][2])); 
     tr.cells[3].appendChild(document.createTextNode(dataset[i][3])); 
     tr.cells[4].appendChild(document.createTextNode(dataset[i][4])); 
     tr.cells[5].appendChild((dataset[i][5])); // 
     tr.cells[6].appendChild((dataset[i][6])); // 
     tr.cells[7].appendChild((dataset[i][7])); // 
     table.appendChild(tr); 
     } 

     tablearea.appendChild(table); 
    }, 'json' 
); 
} 

我已经试过在各个领域粘贴通用解决方案,但是我仍然无法获得它的工作。任何帮助将不胜感激。

谢谢!

+1

使用单选按钮而不是复选框;这是他们的目的。 –

回答

1

请试试这个代码

$('input.chk').on('change', function() { 
if($('this:checked')) 
{ 
    var tr =$(this).parents('tr'); 
tr.find("input.chk").not(this).each(function(){ 
$(this).prop('checked', false); 
}); 
} 

}); 
+0

工作就像一个魅力!谢谢! –

相关问题