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

Question

I have a div that I want to show if the user makes a selection in a radio button. 如果用户在单选按钮中进行选择，我要显示一个div。 I am using bootstrap. 我正在使用引导程序。 Can you help me with doing that? 你能帮我吗？ I've tried with select inputs but I cannot with my radio buttons. 我尝试使用选择输入，但是不能使用单选按钮。

HTML 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

You have to get the name attribute from selected 您必须从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

This version works on IE and Chrome. 此版本适用于IE和Chrome。 Simply just updated the el.name in the script to el.value. 只需将脚本中的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

There are a few things to keep in mind when you're doing this. 执行此操作时，需要牢记一些注意事项。 First of all, you're not using the inputs properly. 首先，您没有正确使用输入。

The name of all 3 inputs should be the same if they're a group, and then you change the value. 如果这3个输入为一组，则它们的名称应相同，然后更改该值。 Like this: 像这样：

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

Also, note that instead of passing this as a parameter, I'm passing the event . 另外请注意，而不是通过this作为一个参数，我传递的event 。 this will provide the DOM element, the event will provide more info, and that will include the value you selected. this将提供DOM元素，该事件将提供更多信息，并包括您选择的值。

Finally, you need to modify the function to work with this: 最后，您需要修改函数以使其与此配合使用：

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
      }

    }

The snippet below shows how this works all together. 下面的代码片段显示了它们如何一起工作。

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