Change all the dropdown option' s value when the checkbox is checked

Question

I'm wondering when i check the checkbox (Select all), can all the dropdowns be forced to select "Y" if it's unchecked, all the dropdowns will be forced to select "N"

Many thanks.

 var check = $('#check'); check.onclick(function(){ $('.option') = "Y"; }) 

 <table id="table"> <th> select all <input type="checkbox" id="check"> </th> <tr> <td> <select class="option status"> <option>Y</option> <option>N</option> </select> </td> </tr> <tr> <td> <select class="option status"> <option>Y</option> <option>N</option> </select> </td> </tr> 

Orginally i have a table that show the total amount needs to be paid and payment in arrears

 $(document).ready(function() {

   $("#table").on('input', '.txtCal, .status', function() {
  calculate();
 });


  function calculate() {
  var calculated_total_sum = 0;
  var to_be_paid = 0;

   $("#table tr").each(function() {
   var get_textbox_value = $('.txtCal', this).val();
   var get_payment_status = $('.status', this).val();

    if (get_textbox_value && get_payment_status) {
    if ($.isNumeric(get_textbox_value)) {
      calculated_total_sum += parseFloat(get_textbox_value);
    }

    if (get_payment_status === 'N') {
      to_be_paid += parseFloat(get_textbox_value);
    }
  }
});
$(".total_sum_value").html(calculated_total_sum);
$(".arrears").html(to_be_paid);
 }

  calculate();

  });

HTML

<div class="col-lg-6 result">

<div class="input-group">
<p>
  <span class="input-group-addon">Total Payment</span>
  <span class="input-group-addon">$HKD</span>
  <span class="input-group-addon total_sum_value"></span></p>

  <br><br><br>
  <p>
  <span class="input-group-addon">In Arrears</span>
  <span class="input-group-addon">$HKD</span>
   <span  class="input-group-addon arrears"></span></p>


</div>

Each table row will have a select dropdown that consists of two option "Y" and "N". Originally, i have to manually change its table row option, and the payment in arrears will change accordingly. For example, if the dropdown is "Y" which means paid, the amount of payment in arrears will decrease automatically.

Now after adding the select all function, to force all dropdowns to select "Y",for some reason the calculate function fail to work. Any ideas

Answer 1

Add a common class to all the select and value to the option . Trigger a function on checking the checkbox which will select all Y option.Use jquery 'prop' method to add the property

 function selectAll(elem) { if ($(elem).prop('checked')) { $('.selOptions option[value=Y]').prop('selected', true); } else { $('.selOptions option[value=N]').prop('selected', true); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <th> select all <input type="checkbox" onchange="selectAll(this)"> </th> <tr> <td> <select class="selOptions"> <option value = "Y">Y</option> <option value = "N">N</option> </select> </td> </tr> <tr> <td> <select class="selOptions"> <option value = "Y">Y</option> <option value = "N">N</option> </select> </td> </tr> </table> 

Answer 2

Using vainilla JS

<table>
    <th>
        select all <input id="selectAll" type="checkbox" />
    </th>
    <tr>
        <td>
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            <select>
                <option>Y</option>
                <option>N</option>
            </select>
        </td>
    </tr>
</table>


<script>
var selectAll = document.getElementById('selectAll');
var options = document.getElementsByTagName('select');

selectAll.addEventListener( 'change', function() {
    if(this.checked) {
        for(var i=0; i < options.length; i++) {
            options[i].selectedIndex = 0;
        }
    }
});
</script>

Answer 3

1. First determine when the checkbox is checked or not.
   • $('#check').on('change', function() { if ($(this).is(':checked')) {...

2. Then you could use a selector based on an option 's text content (you don't have a value attribute which you should but it's still functional.)

   • $('option:contains(Y)')...

3. Then use .prop() method to programmatically change it's selected state.

   • .prop('selected', true);

Demo

 $('#check').on('change', function() { if ($(this).is(':checked')) { $('option:contains(Y)').prop('selected', true); } else { $('option:contains(N)').prop('selected', true); } }); 

 <table> <th> select all <input type="checkbox" id="check"> </th> <tr> <td> <select class="option"> <option>--</option> <option>Y</option> <option>N</option> </select> </td> </tr> <tr> <td> <select class="option"> <option>--</option> <option>Y</option> <option>N</option> </select> </td> </tr> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>