1 回答

TA貢獻1862條經驗 獲得超6個贊
您的代碼為事件處理程序分配了單擊復選框時單擊提交按鈕的事件。這意味著:
如果未單擊該復選框,則不會設置這些按鈕單擊的事件處理程序。因此,單擊按鈕將不會執行任何JS提交工作,但可能會執行常規的非JS表單提交;
如果您單擊一次復選框(例如,將其選中),則將事件處理程序添加到您的
#submit
按鈕。如果現在取消選中該復選框,則向按鈕添加另一個事件處理程序#submit
,然后在#deliverySubmit
按鈕上添加一個事件處理程序!取消選中該復選框不會刪除您之前添加的事件處理程序。因此,如果您單擊#submit
,兩個處理程序都將觸發。如果您多次勾選和取消勾選該復選框,則只需繼續堆積其他事件處理程序,當最終單擊該按鈕時,所有這些事件處理程序都將運行。
這不是一個好方法。相反,您應該獨立于用戶交互設置事件處理程序,并使代碼根據復選框狀態確定要執行的操作。
其他一些觀察:
要跟蹤復選框的點擊次數,您應該使用
$('.le-checkbox').on('change', function() {
,而不是click
;我不確定為什么
$(".le-checkbox").attr("checked", "checked");
在勾選復選框時為什么要手動設置復選框狀態(例如)?我不會那樣做,它肯定會引起問題,實際上并沒有做任何事情。在
#submit
處理程序中,選中此復選框時,您具有shipping(daddress,dcity_id,user);
,但未設置這些變量。如果勾選該復選框,則表示運費==結算,所以我認為您的意思是shipping(address, city_id, user);
對吧?我不確定為什么您的復選框文本是實際的鏈接?這只會使事情復雜化-僅使用label,以便單擊文本將正確切換復選框。
您尚未向我們顯示您的
#submit
按鈕HTML,所以我不知道-您為什么有2個按鈕?還不夠嗎?
將所有這些放在一起,嘗試如下操作:
$('#submit').click(function(){
var $checkbox=$('.le-checkbox'),
address= $('#address').val(),
city_id= $('#city_id').val(),
daddress= $('#de_address').val(),
dcity_id= $('#de_city_id').val(),
user = {{Auth::user()->id}};
// Billing address is always sent, no matter the checkbox state
billing(address, city_id, user);
// Shipping address depends on checkbox state
if ($checkbox.is(':checked') {
shipping(address, city_id, user);
} else {
shipping(daddress, dcity_id, user);
}
});
$('.le-checkbox').on('change', function(){
$("#deliveryadd").toggle();
// .toggle() is simpler than .show() and .hide()
// if (this.checked) {
// $("#deliveryadd").hide();
// } else {
// $("#deliveryadd").show();
// }
}
添加回答
舉報