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

Question

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

3

你好，我有一个问题，当复选框被选中时，如何显示选择字段？

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

- Jonas Dulay

如果复选框被选中，应该选择哪个选项？ - devpro

@devpro 我只想展示选择框。 - Jonas Dulay

选择框是默认显示还是隐藏？你检查过我的解决方案了吗？ - devpro

5个回答

5

这是您问题的解决方案，请查看。

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 示例。

- Ram

这个解决方案唯一的问题是，如果复选框被选中，它仍然不会显示选择内容。 触发器 将有所帮助！ - Rayon

3

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

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

Example:

$('[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>

- devpro

@JonasDulay：很高兴能帮助你。 - devpro

0

试试这个

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

- paranoid

0

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

- Bug

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rayon · Accepted Answer

你必须给 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>