Question

请建议如何解决此问题：OptionA单选按钮显示包含多个复选框的DIV块，但OptionB单选按钮无法通过左选单按钮隐藏显示的块

 function ShowHideDiv(chkPassport) {
  var dvPassport = document.getElementById("dvPassport");
  dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
function ShowHideDivl(chkPassport) {
  var dvPassport = document.getElementById("dvPassport");
  dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
function getFeaturePrice() {}
function calculateTotal() {}
function hideTotal() {}

<body onload='hideTotal()'>
  <div id="wrap">
    <form action="" id="softwareform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <label class='radiolabel'><input type="radio" name="selectedsoftware" onclick="calculateTotal();ShowHideDiv(this)" />Software A </label>
            <label class='radiolabel'><input type="radio" name="selectedsoftware" onclick="calculateTotal();ShowHideDivl(this)" /> software B</label>
            <div class='row'>
              <div id="dvPassport" style="display: none">
                <label class='inlinelabel'><input type="checkbox" name="selectedfeature" onclick="calculateTotal()" />Video
                </label> </div>
              <div id="dvPassportl" style="display:none">
                <label class='inlinelabel'><input type="checkbox" name="selectedfeature" onclick="calculateTotal()" />Video</label>
              </div>
            </div>
          </fieldset>
        </div>
        <div id="total">

        </div>
      </div>
    </form>
  </div>

  <script src="script.js"></script>

</body>

Answer 1

在您的代码中，当您执行ShowHideDiv(this)时，始终会传递当前选中的单选按钮。因此，为了查看选择了哪个，您可以执行以下操作：

  function ShowHideDiv(chkPassport) {
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display =
      chkPassport.value === "Round1" ? "block" : "none";
  }

您还有一个错字ShowHideDivl()，而不是ShowHideDiv()。

var featuresmonth = new Array();
featuresmonth["Round1"] = 300;
featuresmonth["Round2"] = 300;
featuresmonth["Round3"] = 300;
featuresmonth["Round4"] = 525;
featuresmonth["Round5"] = 2000;
featuresmonth["Round6"] = 2000;

function ShowHideDiv(chkPassport) {
  var dvPassport = document.getElementById("dvPassport");
  dvPassport.style.display =
    chkPassport.value === "Round1" ? "block" : "none";
}

function getFeaturePrice() {
  var getFeaturePrice = 0;
  var theForm = document.forms["softwareform"];
  var selectedFeature = theForm.elements["selectedfeature"];
  for (var i = 0; i < selectedFeature.length; i++) {
    if (selectedFeature[i].checked == true) {
      getFeaturePrice += featuresmonth[selectedFeature[i].value];
    }
  }
  return getFeaturePrice;
}

function calculateTotal() {
  var softwarePrice = getFeaturePrice();
  var formatter = new Intl.NumberFormat();
  `enter code here`;
  var divobj = document.getElementById("total");
  divobj.style.display = "block";
  divobj.innerHTML = "Total = " + formatter.format(softwarePrice);
}

function hideTotal() {
  var divobj = document.getElementById("total");
  divobj.style.display = "none";
}

<body onload="hideTotal()">
  <div id="wrap">
    <form action="" id="softwareform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <label class="radiolabel"><input
                  type="radio"
                  name="selectedsoftware"
                  value="Round1"
                  onclick="calculateTotal();ShowHideDiv(this)"
                />Software A
              </label>
            <label class="radiolabel"><input
                  type="radio"
                  name="selectedsoftware"
                  value="Round2"
                  onclick="calculateTotal();ShowHideDiv(this)"
                />
                software B</label
              >
              <div class="row">
                <div class="column">
                  <div class="blue-column">
                    <div id="dvPassport" style="display: none;">
                      <label class="inlinelabel"
                        ><input
                          type="checkbox"
                          name="selectedfeature"
                          value="Round3"
                          onclick="calculateTotal()"
                        />Video
                      </label>
        </div>
      </div>
  </div>
  <div class="column">
    <div class="green-column">
      <div id="dvPassportl" style="display: none;">
        <label class="inlinelabel"><input
                          type="checkbox"
                          name="selectedfeature"
                          value="Round4"
                          onclick="calculateTotal()"
                        />Video</label
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div class="row"><div class="column"></div></div>
            </fieldset>
          </div>
          <div id="total"></div>
        </div>
      </form>
    </div>
    <script type="text/javascript">
      var featuresmonth = new Array();
      featuresmonth["Round1"] = 300;
      featuresmonth["Round2"] = 300;
      featuresmonth["Round3"] = 300;
      featuresmonth["Round4"] = 525;
      featuresmonth["Round5"] = 2000;
      featuresmonth["Round6"] = 2000;

      function ShowHideDiv(chkPassport) {
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display =
          chkPassport.value === "Round2" ? "block" : "none";
      }

      function getFeaturePrice() {
        var getFeaturePrice = 0;
        var theForm = document.forms["softwareform"];
        var selectedFeature = theForm.elements["selectedfeature"];
        for (var i = 0; i < selectedFeature.length; i++) {
          if (selectedFeature[i].checked == true) {
            getFeaturePrice += featuresmonth[selectedFeature[i].value];
          }
        }
        return getFeaturePrice;
      }
      function calculateTotal() {
        var softwarePrice = getFeaturePrice();
        var formatter = new Intl.NumberFormat();
        `enter code here`;
        var divobj = document.getElementById("total");
        divobj.style.display = "block";
        divobj.innerHTML = "Total = " + formatter.format(softwarePrice);
      }
      function hideTotal() {
        var divobj = document.getElementById("total");
        divobj.style.display = "none";
      }
    </script>
  </body>

选择其他单选按钮时隐藏DIV

1 个答案: