javascript - 选中复选框时更改所有下拉选项的值

Question

我想知道当我选中复选框(全选)时，是否可以强制所有下拉菜单选择“Y” 如果未选中，所有下拉菜单都将强制选择“N”

非常感谢。

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>

原来我有一张表格显示需要支付的总金额和欠款

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

每个表行都有一个选择下拉列表，其中包含两个选项“Y”和“N”。原来，我必须手动更改它的表格行选项，而欠款也会随之改变。 例如下拉框为“Y”表示已支付，则欠款金额会自动减少。

现在添加全选功能后，强制所有下拉菜单选择“Y”，由于某种原因计算功能无法工作。 任何想法

Answer 1

为所有select 和option 添加一个公共(public)类。在选中复选框时触发一个函数，该复选框将选择所有 Y 选项。使用 jquery 'prop' 方法添加属性

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>