时间戳

首页 > 解决方案 > 如何判断是否调用了两个 onclick 函数

javascript - 如何判断是否调用了两个 onclick 函数

问题描述

如果调用了 Monthly() 和 Annual() 函数，如何显示或显示？

想要展示：

<input style="display:none;" id="payment_950" type="text"  
name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00"
class="form-control" readonly>

代码 ：

//show and hide payment subscription
function Monthly() {
  var x = document.getElementById("payment_750");
  var y = document.getElementById("payment_200");
  var z = document.getElementById("payment_950");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "none";
  }
}
//show and hide payment subscription
function Annual() {
  var x = document.getElementById("payment_750");
  var y = document.getElementById("payment_200");
  var z = document.getElementById("payment_950");
  if (y.style.display === "none") {
    x.style.display = "none";
    y.style.display = "block";
    z.style.display = "none";
  } else {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "none";
  }
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark"></span>

<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark"></span>

<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>

<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>

<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>


标签： javascripthtml

解决方案

尝试这个 ：

var x = document.getElementById("payment_750");
var y = document.getElementById("payment_200");
var z = document.getElementById("payment_950");
var monthly = document.querySelector('#monthly');
var annual = document.querySelector('#annual');

//show and hide payment subscription
function Monthly() {
  let bothChecked = check();
  if (!bothChecked) {
    if (x.style.display === "none")
      x.style.display = "block";
    else
      x.style.display = "none";
  }
}

//show and hide payment subscription
function Annual() {
  let bothChecked = check();
  if (!bothChecked) {
    if (y.style.display === "none")
      y.style.display = "block";
    else
      y.style.display = "none";
  }
}


function check() {
  if (monthly.checked && annual.checked) {
    x.style.display = "none";
    y.style.display = "none";
    z.style.display = "block";
    return true;
  }
  z.style.display = "none";
  return false;
}
<input onclick="Monthly()" value="Monthly Subscription" id="monthly" name="payment_description" type="checkbox">
<span class="checkmark">Monthly</span>
<br/>
<input onclick="Annual()" value="Annual Membership" id="annual" name="payment_description" type="checkbox">
<span class="checkmark">Annual</span>

<input style="display:none;" id="payment_750" type="text" name="payment_amount" placeholder="₱750.00" class="form-control" readonly>

<input style="display:none;" id="payment_200" type="text" name="payment_amount" placeholder="₱200.00" class="form-control" readonly>

<input style="display:none;" id="payment_950" type="text" name="payment_amount" placeholder="₱750 + ₱200 = ₱950.00" class="form-control" readonly>

推荐阅读