Question

我有一个页面，其中使用来自Ajax调用的Javascript动态生成可能选择的表。表格的每一行都有一个带有关联id的复选框。然后，用户可以根据自己的喜好选择多个复选框，然后按下＆＃34; START＆＃34;按钮。按下按钮时，我需要获取选择并将其作为Ajax调用数据的一部分发送。我遇到的问题是获取选择并在Ajax调用中使用它们。

index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="access_database.js" type="text/javascript"></script>
   </head>
   <body>
        <script>initializeDatabase();</script>
        <h1 align="center">WELCOME TO MY APPLICATION</h1>
        <script>getDecks();</script>
        <p>FRONT</p><input type="radio" name="side_selection" value="FRONT">
        <p>BACK</p><input type="radio" name="side_selection" value="BACK">
        <br></br>
        <form action="study.html">
            <input type="submit" value="START">
        </form>
   </body>
</html>

access_database.js：

//Function for getting decks from database
function getDecks() {
    var json;
    $.ajax({
        url: "get_decks.php",
        type: "GET",
        success: function(data) {
            json = JSON.parse(data);
            createTable(json, "Available Decks");
        }
    });
}

//Function for initializing database
function initializeDatabase() {
    $.ajax({
        url: "action.php",
        type: "GET",
        data: { param1: "INITIALIZE"}
    });
}

//Function to create HTML table
function createTable(json, headerName) {
    var header = document.createElement('h2');
    var textHeader = document.createTextNode(headerName);
    header.appendChild(textHeader);

    var table = document.createElement('table');
    table.setAttribute("border", "1");
    var th = document.createElement('th');
    var textTH = document.createTextNode("DECK ID");
    th.appendChild(textTH);
    var th1 = document.createElement('th');
    var textTH1 = document.createTextNode("DECK DESCRIPTION");
    th1.appendChild(textTH1);
    var th2 = document.createElement('th');
    var textTH2 = document.createTextNode("CHAPTER ID");
    th2.appendChild(textTH2);
    var th3 = document.createElement('th');
    var textTH3 = document.createTextNode("GROUP");
    th3.appendChild(textTH3);
    var th4 = document.createElement('th');
    var textTH4 = document.createTextNode("CHAPTER NAME");
    th4.appendChild(textTH4);
    table.appendChild(th);
    table.appendChild(th1);
    table.appendChild(th2);
    table.appendChild(th3);
    table.appendChild(th4);
    for (var i = 0; i < json.length; i++){
        var tr = document.createElement('tr');   
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var text1 = document.createTextNode(json[i].deck_ID);
        var text2 = document.createTextNode(json[i].deck_description);
        var td3 = document.createElement('td');
        var td4 = document.createElement('td');
        var text3 = document.createTextNode(json[i].chapter_ID);
        var text4 = document.createTextNode((json[i].faculty=='1')?'Faculty':'Student');
        var td5 = document.createElement('td');
        var text5 = document.createTextNode(json[i].name);
        var buttonR = document.createElement('INPUT');
        buttonR.setAttribute("type", "checkbox");
        buttonR.setAttribute("id", json[i].deck_ID);

        td1.appendChild(text1);
        td2.appendChild(text2);
        tr.appendChild(td1);
        tr.appendChild(td2);
        td3.appendChild(text3);
        td4.appendChild(text4);
        td5.appendChild(text5);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(buttonR);

        table.appendChild(tr);
    }
    document.body.appendChild(header);
    document.body.appendChild(table);
}

我想使用我现在拥有的内容进行选择，然后使用Ajax调用中的数据进行查询。我只是寻找帮助，以我可用于Ajax调用的格式获取选择。

Answer 1

我认为您正在寻找类似的内容（免责声明：未运行/语法检查）

$('input[type="submit"]').click(function() {
    var selection = []
    for (var i = 0; i < json.length; i++){
        if ($("#"+json[i].deck_ID).is(':checked')){
            selection.push(json[i].deck_ID);
        }
    }
    $.ajax({
      method: "POST",
      url: "some.php",
      data: { selection:  JSON.stringify(selection)}
    }).done(function( msg ) {
        alert( "Data Saved: " + msg );
    });


});

我知道你在寻求具体的帮助，但我觉得在道德上有义务告诉你使用javascript是非常不正确的。具体来说，我的意思是

    <script>initializeDatabase();</script>
    <h1 align="center">WELCOME TO MY APPLICATION</h1>
    <script>getDecks();</script>

但是你创建表格的方法也非常冗长/乏味。

Answer 2

你可以做这样的事情

function getChecked() {
    return $('table input[type="checkbox"]').filter(':checked').map(function(index, item) {
        return $(item).attr('id');
    }).toArray();
}

如何从HTML到Ajax请求中选中复选框？

2 个答案: