如何根据单选按钮状态隐藏或显示元素？

Question

在这个 laravel 刀片中，我有一个表单，它有两个单选按钮 local 和 global 和一个下拉列表 select，我想要做的是，默认情况下下拉选择是隐藏（不可见）和全局单选被选中并且下拉选择应该只通过勾选内部单选按钮可见。

选中全局无线电 -> 下拉选择不可见（默认）

检查内部收音机 -> 下拉选择可见。

<div class="form-group">
     <p>Type:</p>
     <input  name="type" type="radio" id="internal" value="internal" style="vertical-align:middle; cursor: pointer;">
     <label for="internal">internal</label><br>
     <input  name="type" type="radio" id="global" value="global"  style="vertical-align:middle; cursor: pointer;" checked>
     <label for="global">global</label>
                                                
</div>
<div class="form-group" id="company_select" >
                                                
     <label for="company"> Company </label>
     <select class="form-control" id="company" name="company">
         <option  value="company_id.1">company1</option>
         <option  value="company_id.2">company2</option>
     </select> 
                                                     
</div>
<script type="text/javascript">

</script>

Answer 1

这是另一个简单的实现。默认情况下，选择是隐藏的（使用 css）。然后对收音机使用更改事件并简单地检查 $("#internal") 被选中并决定显示隐藏

$(document).ready(function () {
     $("input[name=type]").change(function(){

        if($("#internal").is(':checked')){
            $("#company_select").show();
        }else{
            $("#company_select").hide();
        }
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
     <p>Type:</p>
     <input  name="type" type="radio" id="internal" value="internal" style="vertical-align:middle; cursor: pointer;">
     <label for="internal">internal</label><br>
     <input  name="type" type="radio" id="global" value="global"  style="vertical-align:middle; cursor: pointer;" checked>
     <label for="global">global</label>
                                                
</div>
<div class="form-group" id="company_select" style="display:none">
                                                
     <label for="company"> Company </label>
     <select class="form-control" id="company" name="company" >
         <option  value="company_id.1">company1</option>
         <option  value="company_id.2">company2</option>
     </select> 
                                                     
</div>

Answer 2

您可以使用if 语句来检查您选中的单选输入的值是否为internal，然后隐藏或显示您的选择。

function toggleSelectDropdown() {
  const radioButton = $('.form-group-radios input[type="radio"]');
  const selectElem = $('select');
  
  radioButton.on('change', (e) => {
    const self = $(e.currentTarget);
    const value = self.val();
    
    // Check if the checked radio button's value is internal, then show the select
    if (value == "internal") {
      selectElem.show();
      return false;
    }
    
    // If not, then hide it.
    selectElem.hide();
  });
}

toggleSelectDropdown();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group form-group-radios">
     <p>Type:</p>
     <input  name="type" type="radio" id="internal" value="internal" style="vertical-align:middle; cursor: pointer;" checked>
     <label for="internal">internal</label><br>
     <input  name="type" type="radio" id="global" value="global"  style="vertical-align:middle; cursor: pointer;">
     <label for="global">global</label>
                                                
</div>
<div class="form-group" id="company_select" >
                                                
     <label for="company"> Company </label>
     <select class="form-control" id="company" name="company">
         <option  value="company_id.1">company1</option>
         <option  value="company_id.2">company2</option>
     </select> 
                                                     
</div>

Answer 3

您可以将事件点击监听器添加到收音机并创建隐藏和显示两种样式，然后根据选中的收音机切换这些类。

CSS：

.hide {
    display: none;
  }

  .show {
    display: block;
  }

JS：

  var radios = document.getElementsByName('type');
  radios.map((radio, index) => {
    radio.addEventListener('click', (ev) => {
      const selectClass = document.getElementById('company_select').classList;
      if (ev.target.checked && ev.target.value === 'internal') {
        if (selectClass?.contains('hide')) selectClass.remove('hide')
        selectClass?.add('show')
      }
      else if (ev.target.checked && ev.target.value === 'global') {
        if (selectClass?.contains('show')) selectClass.remove('show')
        selectClass?.add('hide')
      }
    })
  })