如何有效地利用[inputcheckbox选中事件]

2. 实现复杂交互逻辑

除了简单的显示隐藏外，我们还可以利用来实现更复杂的交互逻辑。例如，在一个电商网站中，用户可能需要选择不同的配送方式和支付方式，而这些选择可能会影响订单的价格和配送时间。

这时，我们可以使用来让用户选择配送方式和支付方式，然后通过来动态计算订单的价格和配送时间。同时，我们还可以根据用户的选择来显示或隐藏一些提示信息，以帮助用户更好地完成订单。

// HTML

快递配送

同城配送

微信支付

支付宝支付
订单价格：0元
预计配送时间：0天

// JavaScript
var deliveryOptions = document.querySelectorAll("input[type='checkbox'][id^='delivery-option']");
var paymentOptions = document.querySelectorAll("input[type='checkbox'][id^='payment-option']");
var priceInfo = document.getElementById("price-info");
var deliveryInfo = document.getElementById("delivery-info");

function calculatePriceAndTime() {
  var price = 0;
  var time = 0;
  // 计算配送价格和时间
  if(deliveryOptions[0].checked) {
    price += 10;
    time += 3;
  }
  if(deliveryOptions[1].checked) {
    price += 20;
    time += 1;
  }
  // 计算支付方式价格
  if(paymentOptions[0].checked) {
    price += 0;
  }
  if(paymentOptions[1].checked) {
    price += 1;
  }
  // 更新订单价格和配送时间
  priceInfo.innerText = "订单价格：" + price + "元";
  deliveryInfo.innerText = "预计配送时间：" + time + "天";
}

deliveryOptions.forEach(function(option) {
  option.addEventListener("change", function() {
    calculatePriceAndTime();
  });
});
paymentOptions.forEach(function(option) {
  option.addEventListener("change", function() {
    calculatePriceAndTime();
  });
});

在上面的代码中，我们定义了四个和两个

// HTML

显示密码


密码不一致

// JavaScript
var showPassword = document.getElementById("show-password");
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirm-password");
var passwordError = document.getElementById("password-error");

function validatePassword() {
  if(password.value !== confirmPassword.value) {
    passwordError.classList.remove("hidden");
  } else {
    passwordError.classList.add("hidden");
  }
}

showPassword.addEventListener("change", function() {
  if(this.checked) {
    password.type = "text";
    confirmPassword.type = "text";
  } else {
    password.type = "password";
    confirmPassword.type = "password";
  }
});

password.addEventListener("input", function() {
  validatePassword();
});
confirmPassword.addEventListener("input", function() {
  validatePassword();
});

var checkbox = document.getElementById("checkbox");
checkbox.addEventListener("change", function() {
  if(this.checked) {
    console.log("选择了复选框");
  } else {
    console.log("取消了复选框");
  }
});

var checkbox = document.getElementById("checkbox");
var element = document.getElementById("element");
checkbox.addEventListener("change", function() {
  if(this.checked) {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
});

var checkbox = document.getElementById("checkbox");
var element = document.getElementById("element");
checkbox