选中复选框时，JQuery不设置变量

怎么做，

这很简单，但我看不出自己的错误。 当用户单击该复选框时，变量isEmployee需要设置为true。 然后我将该变量传递给JSON数组，但是有些原因，无论我做什么，都没有设置isEmployee变量。

Current Employee:  var isEmployee = false; $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; } }); data = {'Employ_Status':isEmployee}; 

但是，当我点击提交按钮时，即使单击复选框，标题仍然显示为Employ_Status为false。

我不能为我的生活看到这有什么不对

更新：设置复选框后设置数据数组的原因是由于数据数组仅在其他字段经过validation后提交：

 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 = '
'+ReturnedData.Message+'
'; } else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button results = '
'+ReturnedData.Message+'
'; } $('#DataHolder').html(results); }, 'json'); }); 

更新＃2。 好的，所以每个人都可以看到我从头到尾在做什么：

          
 *Employee Name:  *Employee Number:  *Phone Number:  *Address:  *City:  *State   Select a State Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District Of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming  *Zip:  Current Employee:   
 
   

表单提交的PHP脚本：

  "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); } ?> 

这是完成所有检查的完整jquery

 $(document).ready(function() { $("#FormSubmit").click(function() { //Set click action on formsubmit button var submit = true; //Set default status on submit button var isEmployee = false; if($.trim($('#EmployName').val()) == '') { //Remove whitespaces and check if field is empty alert('Employee Name can not be blank'); submit = false; } var Num = /^[\d]+$/; //RegEx to ensure it's a number being submitted if($.trim($('#EmployNumber').val()) == '' || !Num.test($.trim($('#EmployNumber').val()))) { //Remove whitespaces and check if field is number alert('Employee Number can not be blank and it must be a number'); submit = false; } var Phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //RegEx to test phone number against if(!Phoneregex.test($.trim($('#Phone').val()))) { //If supplied email without whitespaces doesn't match pattern, then alert user alert('Please provide a valid phone number. You must include the dashes'); submit = false; } if($.trim($('#Address').val()) == '') { //Remove whitespaces and check if field is empty alert('Address can not be blank'); submit = false; } if($.trim($('#City').val()) == '') { //Remove whitespaces and check if field is empty alert('City can not be blank'); submit = false; } if($('#State').val() == '') { //Remove whitespaces and check if field is empty alert('Please select a state from the dropdown menu'); submit = false; } if($.trim($('#Zip').val()) == '' || !Num.test($.trim($('#Zip').val()))) { //Remove whitespaces and check if field is number alert('Zip can not be blank and it must be a number'); submit = false; } $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; data['Employ_Status'] = isEmployee; } }); 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("success.php", data, function(ReturnedData) { //post data via ajx to success.php and retrieve response if(ReturnedData.Type == 'Error') { //If error returned, display error message results = '
'+ReturnedData.Message+'
'; } else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button results = '
'+ReturnedData.Message+'
'; } $('#DataHolder').html(results); }, 'json'); } }); }); 

更新＃3

最终的工作代码如下。 由于我没有将isEmployee声明为全局变量。 感谢你的SOOO MUCHH !!!!

 $(document).ready(function() { var data; //Declare data object to hold values var isEmployee = false; //Declare isEmployee which will store checkbox value $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; } else { isEmployee = false; } }); $("#FormSubmit").click(function() { //Set click action on formsubmit button var submit = true; //Set default status on submit button if($.trim($('#EmployName').val()) == '') { //Remove whitespaces and check if field is empty alert('Employee Name can not be blank'); submit = false; } var Num = /^[\d]+$/; //RegEx to ensure it's a number being submitted if($.trim($('#EmployNumber').val()) == '' || !Num.test($.trim($('#EmployNumber').val()))) { //Remove whitespaces and check if field is number alert('Employee Number can not be blank and it must be a number'); submit = false; } var Phoneregex = /^1?[\s-]?\(?(\d{3})\)?[\s-]?\d{3}[\s-]?\d{4}$/; //RegEx to test phone number against if(!Phoneregex.test($.trim($('#Phone').val()))) { //If supplied email without whitespaces doesn't match pattern, then alert user alert('Please provide a valid phone number. You must include the dashes'); submit = false; } if($.trim($('#Address').val()) == '') { //Remove whitespaces and check if field is empty alert('Address can not be blank'); submit = false; } if($.trim($('#City').val()) == '') { //Remove whitespaces and check if field is empty alert('City can not be blank'); submit = false; } if($('#State').val() == '') { //Remove whitespaces and check if field is empty alert('Please select a state from the dropdown menu'); submit = false; } if($.trim($('#Zip').val()) == '' || !Num.test($.trim($('#Zip').val()))) { //Remove whitespaces and check if field is number alert('Zip can not be blank and it must be a number'); submit = false; } 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("success.php", data, function(ReturnedData) { //post data via ajx to success.php and retrieve response if(ReturnedData.Type == 'Error') { //If error returned, display error message results = '
'+ReturnedData.Message+'
'; } else if (ReturnedData.Type == 'Success') { //If success returned, display message and remove submit button results = '
'+ReturnedData.Message+'
'; } $('#DataHolder').html(results); }, 'json'); } }); }); 

Answer 1

尝试在change事件中设置数据。

 var isEmployee = false;var data; $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; }else{ isEmployee = false; } data = {'Employ_Status':isEmployee}; alert(data['Employ_Status']); // now pass it where you want }); 

  Current Employee:  

Answer 2

你需要把你的声明放在函数中：

 $('#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; }); 

编辑：已更改data = {'Employ_Status':isEmployee}; to data['Employ_Status'] = isEmployee; 为了仅修改该对象的字段/属性

编辑：你可以通过很多方式解决它，但改变这个：

 $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; data['Employ_Status'] = isEmployee; } }); 

有了这个：

 if($('#EmployStats').attr("checked")) { isEmployee = true; data['Employ_Status'] = isEmployee; } 

会解决它。 这是因为只要用户单击“提交”按钮，就会执行代码。 因此，不是将data['Employ_Status']的复选框值分配给true或者是值，而是在复选框上设置更改的侦听器，忽略其当前值

Answer 3

我已经测试了你的代码，似乎isEmployee DO正确地切换了它的值。 如果您的问题是您的数据对象没有相应更新，那只是因为您没有将它放在您的更改事件中。 因此，它只会在第一时间定义。 要解决此问题，您可以尝试以下示例：

HTML

 Current Employee:  
 

JS

 var isEmployee = false; var data = {'Employ_Status':isEmployee}; $('#EmployStats').change(function() { if(this.checked) { isEmployee = true; } else { isEmployee = false; } data.Employ_Status = isEmployee; $('#kanban').html(data.Employ_Status.toString()); }); 

这是一个例子 。

如果不是这种情况，我认为问题出在您的表单提交过程中。 你能提供关于整个过程的更详细的代码吗？

---

编辑

现在很明显，这个问题的原因是由于你的isEmployee没有切换它的价值。

这是你的代码：

 // ... $('#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() { ... }); });