根据选定的单选输入显示和隐藏div

Question

如果用户在单选按钮中进行选择，我要显示一个div。 我正在使用引导程序。 你能帮我吗？ 我尝试使用选择输入，但是不能使用单选按钮。

HTML

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> function on_change(el){ if(el.options[el.selectedIndex].value == 'optradio1'){ document.getElementById('text').style.display = 'block'; // Show el }else{ document.getElementById('text').style.display = 'none'; // Hide el } } </script> </head> <body> <!-- <h1>Hello, world!</h1> --> <div class="container" "row justify-content-md-center"> <h4>Please Choose a Table Below</h4> <div class="radio"> <label><input type="radio" name="optradio1" onchange='on_change(this)'>MDM_Sls_Rep_Dim_Na</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Sample_Table1</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Sample_Table2</label> </div> </div> <!-- <div class="radio"> --> <!-- <select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable --> <!-- <option value='one'>One</option> // Note I added value='one' --> <!-- <option value='two'>Two</option> // Note I added value='two' --> <!-- </select> --> <!-- </div> --> <div id="text" style="display:none;"> // Note display:none instead of display:hidden The text would show if the user chooses option "Two" </div> </body> </html>

Answer 1

您必须从selected获取name属性

 function on_change(el){ if(el.name == 'optradio1'){ document.getElementById('text').style.display = 'block'; // Show el }else{ document.getElementById('text').style.display = 'none'; // Hide el } }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container" "row justify-content-md-center"> <h4>Please Choose a Table Below</h4> <div class="radio"> <label><input type="radio" name="optradio1" onchange="on_change(this)">MDM_Sls_Rep_Dim_Na</label> </div> <div class="radio"> <label><input type="radio" name="optradio" onchange="on_change(this)">Sample_Table1</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" onchange="on_change(this)">Sample_Table2</label> </div> </div> <div id="text" style="display:none;color:red"> // Note display:none instead of display:hidden The text would show if the user chooses option "Two" </div>

Answer 2

此版本适用于IE和Chrome。 只需将脚本中的el.name更新为el.value。

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
   <div class="row">
    <div class="col-4 col-sm-3">
  <h2>Please Choose a Table Below</h2>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)" value="MDM">MDM_Sls_Rep_Dim_Na</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)">Sample_Table1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio1" onchange="on_change(this)">Sample_Table2</label>
    </div>
  </form>
        </div>
        <div class="col-4 col-sm-3">
<div id="text" style="display:none;color:red">
<br><br><br>
// Note MDM_Sls_Rep_Dim_Na
 Rules: <br>
    1. Rep code must be five digits <br>
    2. Date format must be 'mm-dd-yyyy' <br>
    3. Rep Code exists in bi.t_sls_rep_dim_na


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

<!--<div class="container">
   <div class="row">
    <div class="col-4 col-sm-3">
     <h4>Please Choose a Table Below</h4>
<form>
<div class="radio">
  <label><input type="radio" name="optradio1" onchange="on_change(this)">MDM_Sls_Rep_Dim_Na</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio2">Sample_Table1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio3">Sample_Table2</label>
</div>
 </form>   
</div>
    <div class="col-4 col-sm-3">
<div id="text" style="display:none;color:red">
<br><br><br>
// Note MDM_Sls_Rep_Dim_Na
 Rules: <br>
    1. Rep code must be five digits <br>
    2. Date format must be 'mm-dd-yyyy' <br>
    3. Rep Code exists in bi.t_sls_rep_dim_na


        </div>
    </div>
  </div>
</div>-->

    <script type="text/javascript">
        function on_change(el){
        if(el.value == 'MDM'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; 
                    // Hide el
        }






    }
    </script> 
</body>
</html>

Answer 3

执行此操作时，需要牢记一些注意事项。 首先，您没有正确使用输入。

如果这3个输入为一组，则它们的名称应相同，然后更改该值。 像这样：

<input type="radio" name="optradio" oninput='on_change(event)' value="sample1">

另外请注意，而不是通过this作为一个参数，我传递的event 。 this将提供DOM元素，该事件将提供更多信息，并包括您选择的值。

最后，您需要修改函数以使其与此配合使用：

function on_change(el){
      var selectedOption = el.target.value;
      if (selectedOption === 'MDM') {
        document.getElementById('text').style.display = 'block';
      } else {
        document.getElementById('text').style.display = 'none'; // Hide el
      }

    }

下面的代码片段显示了它们如何一起工作。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> function on_change(el){ var selectedOption = el.target.value; if (selectedOption === 'MDM') { document.getElementById('text').style.display = 'block'; } else { document.getElementById('text').style.display = 'none'; // Hide el } } </script> </head> <body> <!-- <h1>Hello, world!</h1> --> <div class="container" "row justify-content-md-center"> <h4>Please Choose a Table Below</h4> <div class="radio"> <label><input type="radio" name="optradio" oninput='on_change(event)' value="MDM">MDM_Sls_Rep_Dim_Na</label> </div> <div class="radio"> <label><input type="radio" name="optradio" oninput='on_change(event)' value="sample1">Sample_Table1</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" oninput='on_change(event)' value="sample2">Sample_Table2</label> </div> </div> <!-- <div class="radio"> --> <!-- <select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable --> <!-- <option value='one'>One</option> // Note I added value='one' --> <!-- <option value='two'>Two</option> // Note I added value='two' --> <!-- </select> --> <!-- </div> --> <div id="text" style="display:none;"> // Note display:none instead of display:hidden The text would show if the user chooses option "Two" </div> </body> </html>

根据选定的单选输入显示和隐藏div

问题描述

3 个解决方案

解决方案1
2 2018-05-09 12:21:10

解决方案2
1 2018-05-09 19:56:50

解决方案3
0 已采纳 2018-05-09 12:30:53

根据选定的单选输入显示和隐藏div

问题描述

3 个解决方案

解决方案1 2 2018-05-09 12:21:10

解决方案2 1 2018-05-09 19:56:50

解决方案3 0 已采纳 2018-05-09 12:30:53

解决方案1
2 2018-05-09 12:21:10

解决方案2
1 2018-05-09 19:56:50

解决方案3
0 已采纳 2018-05-09 12:30:53