Question

如果用户在单选按钮中进行选择，我想要显示一个div。我正在使用bootstrap。你可以帮我这么做吗？我已尝试使用选择输入，但我无法使用单选按钮。

HTML

＆＃13;

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

＆＃13;

Answer 1

您必须从<?xml version="1.0" encoding="UTF-8"?> <root> <city> <ID>1</ID> <Name>Kabul</Name> <CountryCode>AFG</CountryCode> <District>Kabol</District> <Population>1780000</Population> </city> <city> <ID>2</ID> <Name>Qandahar</Name> <CountryCode>AFG</CountryCode> <District>Qandahar</District> <Population>237500</Population> </city> <city> <ID>3</ID> <Name>Herat</Name> <CountryCode>AFG</CountryCode> <District>Herat</District> <Population>186800</Population> </city> </root>

获取name属性

selected

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

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 个答案: