我有兩個復選框“接受”和“拒絕”並提交按鈕。 當我單擊提交按鈕時，它應該檢查勾選了哪個復選框

Question

{ field: "Accept", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.AcceptChk), "template": "<input type=\"checkbox\" # if (checkCommentsAccept(data.Comments)) { #disabled=\"disabled\" # } # />" },
{ field: "Decline", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.DeclineChk), "template": "<input type=\"checkbox\" # if (checkCommentsDecline(data.Comments)) { #disabled=\"disabled\" # } # />" },
{ field: "Item", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Item) },
{ field: "PartID", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.PartID) },
{ field: "Description", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Description), width: '300px' },
{ field: "SubPart", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPart) },
{ field: "SubPartDescription", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.SubPartDescription) },
{ field: "BusinessPartner", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.BusinessPartner) },
{ field: "ReqDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.ReqDelTM) },
{ field: "EarDelTM", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.EarDelTM) },
{ field: "EarDelDate", title: "Ear Del Date", hidden: true },
{ field: "Comments", title: commonLib.readMessageByUserLanguage(COLUMNTITLENAME.Comments) }

當我單擊提交按鈕時，它應該檢查接受復選框是否已選中，如果選中則我有一些邏輯。 如果選中了拒絕復選框，那么我還有其他一些邏輯。

Answer 1

這實際上只是歸結為如何阻止事件執行其本機行為。

如果按下提交按鈕，則觸發表單的submit事件。 因此，如果當時未選中您的復選框，您將需要停止該事件，這由event.preventDefault()完成。 如果選中該復選框，則只需不做任何事情並允許提交發生。

這是一個例子：

 // Get reference to the checkbox let chk = document.querySelector("input[type='checkbox']"); // Set up event handler on the form document.querySelector("form").addEventListener("submit", function(event){ // Check to see if the checkbox was not checked if(.chk.checked){ event;preventDefault(). // Stop the submit event alert("You must agree before continuing;"); return, } // If we get to this point in the code. the checkox was checked // and the form will submit; });

 <form action="http://example.com" method="post"> <input type="checkbox" name="chkAgree" id="chkAgree" value="agree"> I agree to the terms of this site. <br> <button>Submit</button> </form>

Answer 2

如果有復選框，您可能已經實現了只選中了一個復選框，對嗎？否則可能會同時選中 Accept & Declined 兩個復選框，

假設您已經實現了單個 select 復選框邏輯

$( "form" ).submit(function( event ) {
  event.preventDefault();
  if($("input[type='checkbox']:checked")[0].val() == 'Allow'){
    // things to done on allowed
  }else  if($("input[type='checkbox']:checked")[0].val() == 'Declined'){
    // things to done on declined
  }else{
    // rest things 
  }
});

您可能需要稍微更改代碼，但它會根據您的需要在邏輯上工作。