Jquery隐藏/显示取决于复选框改变的值

jquery hide/show depending on value changed by checkbox

本文关键字:改变 复选框 取决于 隐藏 显示 Jquery      更新时间:2023-09-26

我有一个船/账单表单,其中航运信息将通过javascript调用从账单信息复制。在账单表单中,我隐藏了几个字段,它们会根据国家的选择而变化。到目前为止一切顺利。但是,当我用国家和所有内容(工作)填写账单表单,然后单击复选框将信息复制到船舶表单时,它会复制信息,但它不会将此视为船舶国家的"更改",因此一些字段仍然隐藏。

示例:我填写国家'USA',因此州下拉列表显示了所有州。我填写了所有内容,然后点击"复制到发货表格",这是在同一个页面上。它填满了表单的所有内容,但是状态下拉框没有显示出来……尽管在国家下拉列表中有一个变化

我的代码到目前为止(抱歉,如果这只是一个大杂烩,因为我使用javascript和jquery)。

var SHIP_FNAME = "";
var SHIP_LNAME = "";
var SHIP_COMPANY = "";
var SHIP_ADDRESS1 = "";
var SHIP_ADDRESS2 = "";
var SHIP_CITY = "";
var SHIP_STATE = "";
var SHIP_ZIP = "";
var SHIP_COUNTRY = "";
var SHIP_PHONE = "";
var SHIP_CSTATE = "";
function InitSaveVariables(form) {
SHIP_FNAME = form.SHIP_FNAME.value;
SHIP_LNAME = form.SHIP_LNAME.value;
SHIP_COMPANY = form.SHIP_COMPANY.value;
SHIP_ADDRESS1 = form.SHIP_ADDRESS1.value;
SHIP_ADDRESS2 = form.SHIP_ADDRESS2.value;
SHIP_CITY = form.SHIP_CITY.value;
SHIP_ZIP = form.SHIP_ZIP.value;
SHIP_STATE = form.SHIP_STATE.value;
SHIP_COUNTRY = form.SHIP_COUNTRY.value;
SHIP_PHONE = form.SHIP_PHONE.value;
SHIP_CSTATE = form.SHIP_CSTATE.value;
}
function ShipToBillPerson(form) {
if (form.address_fillin.checked) {
InitSaveVariables(form);
form.SHIP_FNAME.value = form.BILL_FNAME.value;
form.SHIP_LNAME.value = form.BILL_LNAME.value;
form.SHIP_COMPANY.value = form.BILL_COMPANY.value;
form.SHIP_ADDRESS1.value = form.BILL_ADDRESS1.value;
form.SHIP_ADDRESS2.value = form.BILL_ADDRESS2.value;
form.SHIP_CITY.value = form.BILL_CITY.value;
form.SHIP_ZIP.value = form.BILL_ZIP.value;
form.SHIP_STATE.value = form.BILL_STATE.value;
form.SHIP_COUNTRY.value = form.BILL_COUNTRY.value;
form.SHIP_PHONE.value = form.BILL_PHONE.value;
form.SHIP_CSTATE.value = form.BILL_CSTATE.value;
} else {
form.SHIP_FNAME.value = "";
form.SHIP_LNAME.value = "";
form.SHIP_COMPANY.value = "";
form.SHIP_ADDRESS1.value = "";
form.SHIP_ADDRESS2.value = "";
form.SHIP_CITY.value = "";
form.SHIP_ZIP.value = "";
form.SHIP_STATE.value = "";
form.SHIP_COUNTRY.value = "";
form.SHIP_PHONE.value = "";
form.SHIP_CSTATE.value = "";
}
}

//结束-->

$(document).ready(function(){
$('#BILL_COUNTRY').on('change', function() {
  if ( this.value == 'USA')
  {
    $("#statetr").show();
    $("#BILL_STATE").show();
    $("#BILL_CSTATE").hide();
  }
  else if ( this.value == 'Canada')
  {
    $("#statetr").show();
    $("#BILL_STATE").hide();
    $("#BILL_CSTATE").show();
  }
  else
  {
    $("#statetr").hide();
    $("#BILL_STATE").hide();
    $("#BILL_CSTATE").hide();
  }
});
$('#SHIP_COUNTRY').on('change', function() {
  if ( this.value == 'USA')
  {
    $("#statetr2").show();
    $("#SHIP_STATE").show();
    $("#SHIP_CSTATE").hide();
  }
  else if ( this.value == 'Canada')
  {
    $("#statetr2").show();
    $("#SHIP_STATE").hide();
    $("#SHIP_CSTATE").show();
  }
  else
  {
    $("#statetr2").hide();
    $("#SHIP_STATE").hide();
    $("#SHIP_CSTATE").hide();
  }
});
});

(ship_cstate block是一个包含加拿大各州的block)复选框在代码中通过以下方式调用:

<input type="checkbox" name="address_fillin" id="address_fillin" value="Yes" OnClick="javascript:ShipToBillPerson(this.form);">

我试图谷歌代码检查复选框,然后SHIP_COUNTRY的值,但找不到任何东西。我试着自己构建它,但这基本上使整个代码失效了……我:

$('#address_fillin').click(function(){
  if ($("#SHIP_COUNTRY").val("USA")) {
  {
    $("#statetr2").show();
    $("#SHIP_STATE").show();
    $("#SHIP_CSTATE").hide();
  } (etc... since this is basically a copy of the other function above)

试着把

$("#SHIP_COUNTRY").trigger("change"); 
在复制函数的末尾使用

。这将运行附在#SHIP_COUNTRY上的change函数。