如何使用Java顯示/隱藏div？

Question

我正在嘗試使用javascript顯示/隱藏div的內容，具體取決於選中的單選按鈕。 我有一個onchange函數，可用於將div內容從一個div更改為另一個div，但是它不起作用。 如果您可以在jquery中執行此操作，那沒關系，但是我對jquery不那么熟悉，所以如果您可以用它更新我的jsfiddle，我會很感激的：）這是JSFiddle： https ://jsfiddle.net/markusbond/au77Ladg/任何感謝您的幫助:)

JAVASCRIPT：

    function changeSelection() {

        if (document.getElementById("selectionTables").checked) {
            document.getElementById("populateCheckBoxes").show;
            document.getElementById("unpopulateCheckBoxes").hidden;
        } else {
            document.getElementById("unpopulateCheckBoxes").show;
            document.getElementById("populateCheckBoxes").hidden;
        }
    }

HTML：

<form role="form">
  <div class="row">
    <!--this is the onchange call-->
    <div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
      <!--this is the first radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionTables" />Use Tables
      </label>&nbsp;&nbsp;
      <!--this is the second radio button-->
      <label>
        <input type="radio" name="optradio" id="selectionViews" />Use Views
      </label>
    </div>
    <!--this is the first changed div-->
  </div>
  <div class="row" id="populateCheckBoxes">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionCondition" />Condition
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionDistribution" />Distribution
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionProgram" />Program
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="selectionTreatment" />Treatment
      </label>
    </div>
  </div>
  <!--this is the second changed div-->
  <div class="row" id="unpopulateCheckBoxes"></div>
</form>

Answer 1

使用JQuery FIDDLE的示例

的JavaScript

$('input:radio[name=optradio]').change(
function(){
       if (this.value == 'selectionTables') {
        $("#unpopulateCheckBoxes" ).hide();
        $("#populateCheckBoxes").show();
    }
    else {
        $("#unpopulateCheckBoxes" ).show();
        $("#populateCheckBoxes").hide();
    }
}
); 

給您的第一個單選按鈕一個值value="selectionTables"

<!--this is the first radio button-->
<label>
    <input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>

我希望我能正確理解你。

Answer 2

document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element

值得注意的是，您將不會總是希望元素被display:block; 。 顯示選項很多，您可能想根據元素的原始顯示方式來回切換。

Answer 3

或通過jQuery，多數民眾贊成在我更喜歡：

function changeSelection() {

    if ($("#selectionTables").attr("checked") {
        $("#populateCheckBoxes").show();
        $("#unpopulateCheckBoxes").hide();
    } else {
        $("#unpopulateCheckBoxes").show();
        $("#populateCheckBoxes").hide();
    }
}

Answer 4

這是正確的方法

  <script>
   function changeSelection() {

       if (document.getElementById("selectionTables").checked) {
          document.getElementById("populateCheckBoxes").style.visibility = "hidden";
        document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
      } else {
        document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
        document.getElementById("populateCheckBoxes").style.visibility = "visible";
      }
  }
 </script>

您正在使用

document.getElementById("unpopulateCheckBoxes").hidden;

但是你應該

document.getElementById("populateCheckBoxes").style.visibility = "hidden";

希望這可以幫助

Answer 5

問題是html不支持show/hide屬性。 嘗試將style屬性與display屬性一起使用。 也可以使用checked屬性進行默認的單選。

<input type="radio" name="optradio" id="selectionTables" checked='' />

 function changeSelection() { var pop = "none", upop = "block"; if (document.getElementById("selectionTables").checked) { pop = "block"; upop = "none"; } document.getElementById("unpopulateCheckBoxes").style.display = upop; document.getElementById("populateCheckBoxes").style.display = pop; } 

 <form role="form"> <div class="row"> <!--this is the onchange call--> <div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()"> <!--this is the first radio button--> <label> <input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables </label>&nbsp;&nbsp; <!--this is the second radio button--> <label> <input type="radio" name="optradio" id="selectionViews" />Use Views </label> </div> <!--this is the first changed div--> </div> <div class="row" id="populateCheckBoxes"> <div class="checkbox"> <label> <input type="checkbox" id="selectionCondition" />Condition </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionDistribution" />Distribution </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionProgram" />Program </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionTreatment" />Treatment </label> </div> </div> <!--this is the second changed div--> <div class="row" id="unpopulateCheckBoxes"></div> </form>