如果选中复选框，则显示选择字段 - Show select field if checkbox is checked

美好的一天，如果选中
复选框，我遇到了一些麻烦，如何显示选择字段

  <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>

您必须具有select输入元素id属性才能标识该元素并将其用作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>

这是您的问题的解决方案，请检查此

.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);
});

这是工作小提琴示例。

您也可以使用切换事件，如果选中复选框将显示选择框，否则隐藏。

请注意，您需要为选择框使用 id 属性 id="selectBox"

例：

$('[name="cod"]').click(function() {
    $("#selectBox").toggle(this.checked);
});

<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="" id="selectBox" style="padding-left:0px;display:none;">
  <option value="">Around Metro Manila Only</option>
  <option value="">Outside Metro Manila Only</option>
  <option value="">Both</option>
</select>

试试这个

  <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>

<?php $test=$_GET['test']?>
 <select name="test" id="" style="padding-left:0px;">
      <option <?php if($test==1) echo 'selected'?> value="1">Around Metro Manila Only</option>
      <option <?php if($test==2) echo 'selected'?> value="2">Outside Metro Manila Only</option>
      <option <?php if($test==3) echo 'selected'?> value="3">Both</option>
  </select>

<</div> div class="answers">

不确定要选择哪个选项，但可以更改 .selectedIndex 值以更改它。

<!DOCTYPE html>
<html>
<body>
<div class="checkbox">
    <br>
    <label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" onclick="selectItem(this.checked)"> My shop offers <b>Cash on Delivery</b></label>
  </div>
     <select name="" id="myList" style="padding-left:0px;">
          <option value="">Around Metro Manila Only</option>
          <option value="">Outside Metro Manila Only</option>
          <option value="">Both</option>
      </select>
</body>
</html>
<script>
function selectItem(isChecked){
    if(isChecked){
        document.getElementById('myList').selectedIndex=1;
    }else{
        document.getElementById('myList').selectedIndex=0;
    }
}
</script>