为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕码人2483693 2024-01-03 14:38:36
请建议如何解决此问题: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>
查看完整描述

1 回答

?
Helenr

TA贡献1780条经验 获得超3个赞

在您的代码中,当您这样做时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>


查看完整回答
反对 回复 2024-01-03
  • 1 回答
  • 0 关注
  • 30 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信