javascript - 在选择时显示/隐藏范围 ID

标签 javascript jquery html

我想在从选择选项值中选择ms时显示复选框,复选框在span的idboxcheck中指定。如果是其他则显示带有 span id radiocheck

的单选按钮

这是我正在尝试的方法,但不起作用:

$('#Typeselect').change(function() {
  var value = this.value;

  if (selectedValue === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
  <span style="display:none" id="boxcheck">
    <input type="checkbox" name="correct['+val+questions+'][]"> Correct
  </span>
  <span id="radiocheck" style="display:none">
    <input type="radio" name="correct['+val+questions+'][]"> Correct
  </span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
  <option value="txt">Text</option>
  <option value="ms">Color text</option>
  <option value="mm">Rainbow</option>
</select>

最佳答案

Working Demo

正如上面评论中提到的,这意味着将变量名称从value更改为selectedValue

尝试以下解决方案:

$('#Typeselect').change(function() {
  var selectedValue = this.value;

  if (selectedValue === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
  <span style="display:none" id="boxcheck">
    <input type="checkbox" name="correct['+val+questions+'][]"> Correct
  </span>
  <span id="radiocheck" style="display:none">
    <input type="radio" name="correct['+val+questions+'][]"> Correct
  </span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
  <option value="txt">Text</option>
  <option value="ms">Color text</option>
  <option value="mm">Rainbow</option>
</select> 

关于javascript - 在选择时显示/隐藏范围 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40466433/

相关文章:

jquery - 使用 Jquery 将随机着色变量添加到样式文本链接

javascript - 为什么PostMan在100行代码后总是显示 "too many errors"?

javascript - 如何用 false 停止脚本?

javascript - 使用同位素对动态数据进行排序

javascript - 带回调的 Bootstrap 通用模式

javascript - 如何使页面宽度动态达到一定限制?

html - 在所有移动设备中的横幅图像中心显示文本

html - 在 Bootstrap 支持的页面中向左侧面板添加滚动条

javascript - React 不会将 props 传递给 API 链接

javascript - 在 emberJS 中保留滚动位置