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

您必须拥有id输入元素的select属性才能识别该元素，并将其用作jQuery选择器。

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

修改：使用.toggle()显示或隐藏匹配的元素。布尔参数将决定匹配元素的可见性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

以下是工作Fiddle示例。

Answer 3

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

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

示例：

＆＃13;
＆＃13;
$('[name="cod"]').click(function() { $("#selectBox").toggle(this.checked); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

试试这个

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

Answer 5

不确定您要选择哪个选项，但您可以更改.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>

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

5 个答案: