Jonas Dulay February 2016

Show select field if checkbox is checked

Good day, I'm having a bit trouble of how can I show the select field if the check box 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>

Answers


Rayon Dabre February 2016

You must have id attribute to the select input element to identify the element and use it as jQuery selector.

.change() will trigger change event on the checkbox and invoke the handler, which will show/hide the select input initially.

Edit: Use .toggle() Display or hide the matched elements. Boolean argument will decide the visibility of the matched elements.

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


paranoid February 2016

Try this

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


Ram February 2016

here is Solution of your problem please check this

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

Here's the working Fiddle example.


devpro February 2016

You can also use toggle event, if checkbox checked display the select box else hide.

Note that, you need to use id attribute for select box 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>


Bug February 2016

Not sure which option you want to select but you can alter the .selectedIndex value to change that.

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

Post Status

Asked in February 2016
Viewed 1,414 times
Voted 14
Answered 5 times

Search




Leave an answer