猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

请建议如何解决此问题：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>


慕码人2483693
浏览 87回答 1
1回答

Helenr

在您的代码中，当您这样做时ShowHideDiv(this)，您始终会传递当前选定的单选按钮。因此，为了查看选择了哪一个，您可以执行以下操作：&nbsp; function ShowHideDiv(chkPassport) {&nbsp; &nbsp; var dvPassport = document.getElementById("dvPassport");&nbsp; &nbsp; dvPassport.style.display =&nbsp; &nbsp; &nbsp; chkPassport.value === "Round1" ? "block" : "none";&nbsp; }你也有一个错字，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) {&nbsp; var dvPassport = document.getElementById("dvPassport");&nbsp; dvPassport.style.display =&nbsp; &nbsp; chkPassport.value === "Round1" ? "block" : "none";}function getFeaturePrice() {&nbsp; var getFeaturePrice = 0;&nbsp; var theForm = document.forms["softwareform"];&nbsp; var selectedFeature = theForm.elements["selectedfeature"];&nbsp; for (var i = 0; i < selectedFeature.length; i++) {&nbsp; &nbsp; if (selectedFeature[i].checked == true) {&nbsp; &nbsp; &nbsp; getFeaturePrice += featuresmonth[selectedFeature[i].value];&nbsp; &nbsp; }&nbsp; }&nbsp; return getFeaturePrice;}function calculateTotal() {&nbsp; var softwarePrice = getFeaturePrice();&nbsp; var formatter = new Intl.NumberFormat();&nbsp; `enter code here`;&nbsp; var divobj = document.getElementById("total");&nbsp; divobj.style.display = "block";&nbsp; divobj.innerHTML = "Total = " + formatter.format(softwarePrice);}function hideTotal() {&nbsp; var divobj = document.getElementById("total");&nbsp; divobj.style.display = "none";}<body onload="hideTotal()">&nbsp; <div id="wrap">&nbsp; &nbsp; <form action="" id="softwareform" onsubmit="return false;">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="cont_order">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <fieldset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="radiolabel"><input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="selectedsoftware"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Round1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick="calculateTotal();ShowHideDiv(this)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />Software A&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="radiolabel"><input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="selectedsoftware"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Round2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick="calculateTotal();ShowHideDiv(this)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; software B</label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="blue-column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="dvPassport" style="display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="inlinelabel"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="selectedfeature"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Round3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick="calculateTotal()"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />Video&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="column">&nbsp; &nbsp; <div class="green-column">&nbsp; &nbsp; &nbsp; <div id="dvPassportl" style="display: none;">&nbsp; &nbsp; &nbsp; &nbsp; <label class="inlinelabel"><input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="selectedfeature"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Round4"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onclick="calculateTotal()"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />Video</label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row"><div class="column"></div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </fieldset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="total"></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; var featuresmonth = new Array();&nbsp; &nbsp; &nbsp; featuresmonth["Round1"] = 300;&nbsp; &nbsp; &nbsp; featuresmonth["Round2"] = 300;&nbsp; &nbsp; &nbsp; featuresmonth["Round3"] = 300;&nbsp; &nbsp; &nbsp; featuresmonth["Round4"] = 525;&nbsp; &nbsp; &nbsp; featuresmonth["Round5"] = 2000;&nbsp; &nbsp; &nbsp; featuresmonth["Round6"] = 2000;&nbsp; &nbsp; &nbsp; function ShowHideDiv(chkPassport) {&nbsp; &nbsp; &nbsp; &nbsp; var dvPassport = document.getElementById("dvPassport");&nbsp; &nbsp; &nbsp; &nbsp; dvPassport.style.display =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chkPassport.value === "Round2" ? "block" : "none";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function getFeaturePrice() {&nbsp; &nbsp; &nbsp; &nbsp; var getFeaturePrice = 0;&nbsp; &nbsp; &nbsp; &nbsp; var theForm = document.forms["softwareform"];&nbsp; &nbsp; &nbsp; &nbsp; var selectedFeature = theForm.elements["selectedfeature"];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < selectedFeature.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (selectedFeature[i].checked == true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getFeaturePrice += featuresmonth[selectedFeature[i].value];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return getFeaturePrice;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function calculateTotal() {&nbsp; &nbsp; &nbsp; &nbsp; var softwarePrice = getFeaturePrice();&nbsp; &nbsp; &nbsp; &nbsp; var formatter = new Intl.NumberFormat();&nbsp; &nbsp; &nbsp; &nbsp; `enter code here`;&nbsp; &nbsp; &nbsp; &nbsp; var divobj = document.getElementById("total");&nbsp; &nbsp; &nbsp; &nbsp; divobj.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; divobj.innerHTML = "Total = " + formatter.format(softwarePrice);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function hideTotal() {&nbsp; &nbsp; &nbsp; &nbsp; var divobj = document.getElementById("total");&nbsp; &nbsp; &nbsp; &nbsp; divobj.style.display = "none";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp; </body>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5