如何根据选定的下拉项目使复选框可见

时间:2015-12-10 23:12:02

标签: jquery html forms

我正在尝试获取一个复选框及其相关标签(在“addfiles”范围内),仅在选择下拉项目3(附加文件)时才会出现。未选中时,将隐藏addfiles范围。

我是jQuery的新手,我不知道从哪里开始这样做。

感谢。

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <script>

  </script>
  </head>

  <body>
    <form name="frmChkForm" id="frmChkForm">
      <select name="service" id="service" class="required contact-service">
        <option value="">Select Option</option>
        <option value="1">feedback</option>
        <option value="2">updates</option>
        <option value="3">attach files</option>
      </select>

      <p>
        <span id="addfiles">
          <input type="checkbox" name="attachfiles" id="attachfiles" value="yes">Attach files    
        </span>
      </p>
    </form>
  </body>
</html>

2 个答案:

答案 0 :(得分:1)

您可以使用.change()进行下拉选择更改。

<{1}}事件中的

this.value应获取当前选定的值。

strict equal to运算符可用于值比较

.show()将显示您的隐藏元素

.change()

您可以在Selectors

中详细阅读

答案 1 :(得分:0)

你可以这样做:

 $(document).ready(function(){
       $('#addfiles').hide()
       $('#frmChkForm').change(function(){
          var selectedOption = $(this).val()
          if(selectedOption == 3){
              $('#addfiles').fadeIn()
          }else{
             $('#addfiles').fadeOut()
          }
       })
    })