如果选中复选框,则显示选择字段

Question

美好的一天,如果选中复选框,我将如何显示选择字段有点麻烦

  <div class="checkbox">
    <br>
    <label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
  </div>

     <select name="" id="" style="padding-left:0px;">
          <option value="">Around Metro Manila Only</option>
          <option value="">Outside Metro Manila Only</option>
          <option value="">Both</option>
      </select>

Answer 1

您必须具有input元素的id属性才能select标识元素并将其用作jQuery选择器.

.change()将触发change复选框上的事件并调用处理程序,最初将显示/隐藏选择输入.

编辑:使用.toggle()显示或隐藏匹配的元素.布尔参数将决定匹配元素的可见性.

$('[name="cod"]').on('change', function() {
  $('#select').toggle(this.checked);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
  <br>
  <label style="padding-right:0px;">
    <input type="checkbox" name="cod" value="1">My shop offers <b>Cash on Delivery</b>
  </label>
</div>

<select name="" style="padding-left:0px;" id='select'>
  <option value="">Around Metro Manila Only</option>
  <option value="">Outside Metro Manila Only</option>
  <option value="">Both</option>
</select>

Answer 2

这是您的问题的解决方案,请检查这一点

CSS

select.selectDrop{
  display:none;
}

HTML

<input type="checkbox" name="seeds" value="Indigofera" /> <span> My shop offers <b>Cash on Delivery</b></span> 


     <select class="selectDrop" name="" id="" style="padding-left:0px;">
          <option value="">Around Metro Manila Only</option>
          <option value="">Outside Metro Manila Only</option>
          <option value="">Both</option>
      </select>

jQuery的

$('[type="checkbox"][name="seeds"]').change(function(){
  $('select.selectDrop').toggle(this.checked);
});

这是工作小提琴的例子.