Javascript 选中复选框时JQuery未设置变量
这很简单，但我看不出我的错误。当用户单击复选框时，需要将变量isEmployee设置为true。然后我将该变量传递给JSON数组，但出于某种原因，无论我做什么，isEmployee变量都没有被设置Javascript 选中复选框时JQuery未设置变量,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,这很简单，但我看不出我的错误。当用户单击复选框时，需要将变量isEmployee设置为true。然后我将该变量传递给JSON数组，但出于某种原因，无论我做什么，isEmployee变量都没有被设置 <label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked /> var isEmployee = false; $('#Em
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked />
var isEmployee = false;
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
});
data = {'Employ_Status':isEmployee};
当前员工：
var isEmployee=false；
$（'#EmployStats'）.change（function（）
{
如果（选中此项）
{
i雇员=真；
}
});
数据={'employee_Status'：iEmployee}；
if(submit == true) { //If data is present, then prepare email and user values to be submitted to .php page
var results;
data = {
'Employ_name': $('#EmployName').val(),
'Employ_num': $('#EmployNumber').val(),
'Employ_phone': $('#Phone').val(),
'Employ_address': $('#Address').val(),
'Employ_city': $('#City').val(),
'Employ_state': $('#State').val(),
'Employ_zip': $('#Zip').val(),
'Employ_Status':isEmployee
}; //Add input to JSON array
//post data via ajax to success.php and retrieve response
$.post("success.php", data, function(ReturnedData) {
if(ReturnedData.Type == 'Error') { //If error returned, display error message
results = '<h1 class="error">'+ReturnedData.Message+'</h1>';
} else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button
results = '<h1 class="success">'+ReturnedData.Message+'</h1>';
}
$('#DataHolder').html(results);
}, 'json');
});
if（submit==true）{//如果存在数据，则准备要提交到.php页面的电子邮件和用户值
var结果；
数据={
'employee_name'：$（'EmployName'）.val（），
'Employ_num'：$（'EmployNumber'）.val（），
‘使用电话’：$（‘电话’）.val（），
“雇用地址”：$（“#地址”）.val（），
“雇佣城市”：$（“#城市”）.val（），
'Employ_state'：$（'#state'）.val（），
'Employ#zip'：$（'#zip'）.val（），
“雇用状态”：我是雇员
}；//将输入添加到JSON数组
//通过ajax将数据发布到success.php并检索响应
$.post（“success.php”、数据、函数（ReturnedData）{
如果（ReturnedData.Type=='Error'）{//如果返回错误，则显示错误消息
结果=''+返回数据。消息+''；
}else if（ReturnedData.Type=='Success'）{//如果返回成功，则显示消息并删除提交按钮
结果=''+返回数据。消息+''；
}
$（'#DataHolder'）.html（结果）；
}“json”）；
});
<!DOCTYPE HTML>
<HEAD>
<TITLE>Jeremy's Form Submit Test </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/form_submit.css">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script src="js/form_submit.js"></script>
</HEAD>
<BODY>
<div id="MainForm">
<label for="EmployName">*Employee Name: </label><input type="text" id="EmployName" />
<label for="EmployNumber">*Employee Number: </label><input type="text" id="EmployNumber" />
<label for="Phone">*Phone Number: </label><input type="text" id="Phone" />
<label for="Address">*Address: </label><input type="text" id="Address" />
<label for="City">*City: </label><input type="text" id="City" />
<label for="State">*State </label>
<select id="State">
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="Zip">*Zip: </label><input type="text" id="Zip" />
<label for="EmployStats">Current Employee: </label><input type="checkbox" id="EmployStats" checked />
<input type="submit" id="FormSubmit" value="Submit">
</div>
<div id="DataHolder"></div>
</BODY>
</HTML>
Jeremy的表格提交测试
*员工姓名：
*员工编号：
*电话号码：
*地址:
*城市：
*陈述
选择一个状态
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
哥伦比亚特区
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥州
纽约
北卡罗来纳州
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚
罗德岛
南卡罗来纳州
南达科他州
田纳西州
得克萨斯州
犹他州
佛蒙特州
弗吉尼亚州
华盛顿
西弗吉尼亚州
威斯康星州
怀俄明州
*邮编：
现任员工：
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')) { //Make sure it's not a direct request. Must be ajax
$ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty, Naughty. This must be an ajax request!!!"));
die($ReturnedData);
}
if(isset($_POST)) { //Ensure that POST is set
//Santiaze the post variables to be double sure no one is up to any funky business
$SaniUser = filter_var($_POST['Employ_name'],FILTER_SANITIZE_STRING);
$SaniNum = filter_var($_POST['Employ_num'],FILTER_SANITIZE_NUMBER_INT);
$SaniPhone = filter_var($_POST['Employ_phone'],FILTER_SANITIZE_NUMBER_INT);
$SaniAddress= filter_var($_POST['Employ_address'],FILTER_SANITIZE_STRING);
$SaniCity = filter_var($_POST['Employ_city'],FILTER_SANITIZE_STRING);
$SaniState = filter_var($_POST['Employ_state'],FILTER_SANITIZE_STRING);
$SaniZip = filter_var($_POST['Employ_zip'],FILTER_SANITIZE_NUMBER_INT);
//Get Employee Status
$SaniEmploy = $_POST['Employ_Status'];
if ($SaniEmploy != "true") {
$ReturnedData = json_encode(array("Type" => "Success", "Message" => "Hello " .$SaniUser. " . Thank you for submitting your information. Your employee number is ".$SaniNum . " . You Phone number is ".$SaniPhone. " . You live at " .$SaniAddress. " in " .$SaniCity. " from " .$SaniState. "in the " .$SaniZip. ". You're currently NOT an employee!!!"));
die($ReturnedData);
} else {
$ReturnedData = json_encode(array("Type" => "Success", "Message" => "Hello " .$SaniUser. " . Thank you for submitting your information. Your employee number is ".$SaniNum . " . You Phone number is ".$SaniPhone. " . You live at " .$SaniAddress. " in " .$SaniCity. " from " .$SaniState. "in the " .$SaniZip. ". You're currently an employee!!!"));
die($ReturnedData);
}
} else {
$ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty naughty. No data was submitted!!!"));
die($ReturnedData);
}
?>
您需要将声明放入函数中：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
// this has to be modified as well on every change
data = {'Employ_Status':isEmployee};
});
此外，您还可以修改代码，使其更简洁：
$('#EmployStats').change(function()
{
isEmployee = this.checked;
// this has to be modified as well on every change
data['Employ_Status'] = isEmployee;
});
编辑：更改数据={'employee_Status'：iEmployee}至数据['employee_Status']=i员工以便仅修改该对象的字段/属性
编辑：您可以通过多种方式修复它，但更改此选项：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
为此：
if($('#EmployStats').attr("checked"))
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
我会修好的。这是因为只要用户单击submit按钮，代码就会被执行。因此，与其将复选框值分配给数据['employment_Status']
到true
或任何值，不如在复选框上设置更改的侦听器，忽略其当前值，您需要将声明放在函数中：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
// this has to be modified as well on every change
data = {'Employ_Status':isEmployee};
});
此外，您还可以修改代码，使其更简洁：
$('#EmployStats').change(function()
{
isEmployee = this.checked;
// this has to be modified as well on every change
data['Employ_Status'] = isEmployee;
});
编辑：更改数据={'employee_Status'：iEmployee}至数据['employee_Status']=i员工以便仅修改该对象的字段/属性
编辑：您可以通过多种方式修复它，但更改此选项：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
为此：
if($('#EmployStats').attr("checked"))
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
我会修好的。这是因为只要用户单击submit按钮，代码就会被执行。因此，与其将复选框值分配给数据['employment_Status']
或任何值，不如在复选框上设置更改的侦听器，忽略其当前值我已经测试了您的代码，iEmployee
似乎确实正确地切换了其值。如果您的问题是您的数据对象没有相应地更新，那只是因为您没有将其放入更改事件中。因此，只能在第一次定义它。要解决此问题，可以尝试以下示例：
HTML
给你
如果不是这样的话，我想问题在于你的表格提交过程。你能提供关于整个过程的更详细的代码吗
编辑
现在很明显，这个问题的原因是您的i员工没有切换它的值
这是您的代码：
// ...
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
data['Employ_Status'] = isEmployee;
}
});
// ...
如您所见，第一次选中#EmployStats
，它会将isEmployee
设置为true
，但当用户第二次单击复选框时，它无法切换回原来的状态。要在此处设置切换条件，可以尝试：
$('#EmployStats').change(function()
{
if(this.checked)
{
isEmployee = true;
}
else
{
isEmployee = false;
}
data['Employ_Status'] = isEmployee;
});
编辑
下面是代码的进一步重构版本：
$(document).ready(function() {
// Prepare your data object outside your event handler
var data = data || {};
// Move your checkbox event handler out from submit event
$('#EmployStats').change(function() {
isEmployee = (this.checked) ? true : false;
data['Employ_Status'] = isEmployee;
});
// Your original submit event handler
$("#FormSubmit").click(function() {
...
});
});
我已经测试了你的代码，看来isEmployee
确实正确地切换了它的值。如果您的问题是您的数据对象没有相应地更新，那只是因为您没有将其放入更改事件中。因此，只能在第一次定义它。要解决此问题，可以尝试以下示例：
HTML
给你
如果不是这样，我