我需要在javascript /服務器端和客戶端沖突中使用php變量

Question

我是編程的新手，但我知道您需要服務器端語言才能訪問數據庫。 我正在使用php訪問我的數據庫並顯示信息，但是我需要使用javascript按下按鈕（.click）來在頁面上四處移動信息。 因此，數據從php到javascript的轉換給我帶來了麻煩。

基本上，我正在構建一個系統，在該系統中，任何將購票的人都輸入到數據庫中。 我的工作人員轉到一個頁面，在該頁面上，購票者被顯示在網頁上的表格（預期出勤率）中，如我添加到jsfiddle中的圖片（javascript框中的鏈接）所示，然后他們選中了一個復選框（復選框）該人實際上來了。 單擊一個按鈕（好），我需要所有單擊的復選框才能移到網頁上的（參加）表。 下面的代碼和小提琴。

PHP

<?php
//Connect to the database
$mysqli = NEW mysqli('localhost:3306','root','password','roster');
//Query the database
$resultSet = $mysqli->query("SELECT * FROM attendant_info");
//Count the returned rows
if($resultSet->num_rows !=0) {
//Turn the results into an associative array
    while($rows = $resultSet->fetch_assoc())
    {
    $ID = $rows['ID'];
    $first_name = $rows['first_name'];
    $last_name = $rows['last_name'];
    $age = $rows['age'];
    $city = $rows['city'];
    $state = $rows['state'];
    $ticket = $rows['ticket'];
    $vip = $rows['vip'];

$entry = "<div id=\"port\"><div id=\"entry\"><!--start of entry-->
<div id=\"ID\"><!--start of ID-->$ID</div><!--end of ID-->
<div id=\"info\"><!--start of info-->
<infowrapper>
<booking><first>First Name:</first><slot1>$first_name</slot1></booking>
<booking><last>Last Name:</last><slot1>$last_name</slot1></booking>
<booking2><age>Age:</age><slot1>$age</slot1></booking2>
<booking4><city>City:</city><slot1>$city</slot1></booking4>
<booking2><state>State:</state><slot1>$state</slot1></booking2>
<booking3><ticket>Ticket#:</ticket><slot1>$ticket</slot1></booking3>
<booking5><vip>VIP:</vip><slot1>$vip</slot1></booking5>
</infowrapper>
<form action=\"\">
Attending<input type=\"checkbox\" name=\"attending\" value=\"attending\">
</form>
</div><!--end of info-->
</div><!--end of entry-->
</div>";

    echo "$entry";
    }   
//Display the results
}else{
    echo "No results.";}
?>

使用Javascript（jQuery的）

$(document).ready(function() {
    $(".bypass").click(function() {
        if ($("#checkbox").click){document.atbox += "entry";
        }
    });
});

這是一個小提琴，所以您可以一起看到整個事情。 我的html位於小提琴中，StackOverflow讓我很難發布它。 http://jsfiddle.net/oy81hrtp/1/

Answer 1

要正確選中您的復選框，請按照以下方法

$(document).ready(function() {
    $(".bypass").click(function() {
        if($('#checkbox').prop('checked')) {
            //Do what you want
        }
    });
});

Answer 2

這可能會給您一些想法。

演示：
http://jsfiddle.net/sfohgrvL/1/

HTML：

<div style="border: 1px solid #000; padding:10px">
    <h1>Expected Attendance</h1>

    <div id="expected_attendance">
        <p><input type="checkbox" class="my_checkboxes" />Option1</p>
        <p><input type="checkbox" class="my_checkboxes" />Option2</p>
        <p><input type="checkbox" class="my_checkboxes" />Option3</p>
        <p><input type="checkbox" class="my_checkboxes" />Option4</p>
        <p><input type="submit" class="my_submit" /></p>
    </div>
</div>
<br></br>
<div style="border: 1px solid #000; padding:10px">
    <h1>Attendance</h1>

    <div id="attendance">
    </div>
</div>

JS：

$(function(){
    $(".my_submit").on('click', function(){
        ht = $("#attendance").html();
        $("input:checkbox[class=my_checkboxes]:checked").each(function()
        {
            var th = $(this);
            ht = ht + th.parent().html();
            th.parent().remove();
        });
        $("#attendance").html(ht);
    });
});