你如何 show/hide 一个 div 与 Javascript？

Question

我正在尝试使用 javascript 到 show/hide 一个 div 的内容，具体取决于选择的单选按钮。我有一个 onchange 函数，用于将 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

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

值得注意的是，您并不总是希望您的元素是 display:block;。有许多显示选项，您可能希望根据元素最初的显示方式来回切换。

Answer 2

或通过 jquery，这就是我想要的：

function changeSelection() {

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

Answer 3

这是正确的方法

  <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 4

示例使用 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 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>

你如何 show/hide 一个 div 与 Javascript？

How do you show/hide a div with Javascript?

html

javascript

jquery

onchange