如果選中復選框，則顯示選擇字段

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()顯示或隱藏匹配的元素。 布爾參數將決定匹配元素的可見性。

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

這是工作小提琴的例子。

Answer 3

您也可以使用切換事件，如果選中復選框，則顯示選擇框，否則隱藏。

注意，你需要使用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>

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 個解決方案

解決方案1
7 已采納 2016-02-08 07:36:27

解決方案2
5 2016-02-08 07:43:03

解決方案3
3 2016-02-08 07:52:15

解決方案4
0 2016-02-08 07:37:05

解決方案5
0 2016-02-08 07:54:14

如果選中復選框，則顯示選擇字段

問題描述

5 個解決方案

解決方案1 7 已采納 2016-02-08 07:36:27

解決方案2 5 2016-02-08 07:43:03

解決方案3 3 2016-02-08 07:52:15

解決方案4 0 2016-02-08 07:37:05

解決方案5 0 2016-02-08 07:54:14

解決方案1
7 已采納 2016-02-08 07:36:27

解決方案2
5 2016-02-08 07:43:03

解決方案3
3 2016-02-08 07:52:15

解決方案4
0 2016-02-08 07:37:05

解決方案5
0 2016-02-08 07:54:14