选中复选框后,将显示选择

时间:2014-06-10 05:22:34

标签: jquery select checkbox

<input type="checkbox" name="seeds-a1" value="Indigofera" /> <span>Indigofera</span>

//this select will show if checkbox mark as checked 

<select class="selectDrop" name="orders">
  <option value="">Select</option>
  <option>1/2 kg</option>
  <option>1 kg</option>
  <option>2 kg</option>
  <option>3 kg</option>
  <option>4 kg</option>
  <option>5 kg</option>
</select>

<input type="checkbox" name="seeds-a2" value="calliandra" /> <span>calliandra</span>

    //this select will show if checkbox mark as checked 

    <select class="selectDrop" name="orders2">
      <option value="">Select</option>
      <option>1/2 kg</option>
      <option>1 kg</option>
      <option>2 kg</option>
      <option>3 kg</option>
      <option>4 kg</option>
      <option>5 kg</option>
    </select>

   <input type="checkbox" name="seeds-a3" value="ipil-ipil" /> <span>ipil-ipil</span>

    //this select will show if checkbox mark as checked 

    <select class="selectDrop" name="orders3">
      <option value="">Select</option>
      <option>1/2 kg</option>
      <option>1 kg</option>
      <option>2 kg</option>
      <option>3 kg</option>
      <option>4 kg</option>
      <option>5 kg</option>
    </select>

3 个答案:

答案 0 :(得分:2)

尝试在复选框的.toggle(switch)事件

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

DEMO

根据您的新要求,您应该使用

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

DEMO

答案 1 :(得分:0)

您可以使用.toggle()以及复选框的已选中属性:

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

答案 2 :(得分:0)

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

});