更改选择时更改了复选框状态

Question

我有一个表单，我想在更改选择框时这样做，它会自动检查相应的复选框。

有人能否对此有所了解？让我们说，为此目的，选择框是'select1，select2等..'，复选框是'checkbox1，checkbox2等..'

表格片段（第一行）

<table width="820" class="content">
    <thead>
        <tr>
            <th>Category</th>
            <th>Code</th>
            <th>Quantity</th>
            <th>Issue?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Beret</td>
            <td><select name="select_beret">
                <option value="8405-99-1278122">8405-99-1278122 : 48cm - 2 in stock</option><option value="8405-99-1278124">8405-99-1278124 : 50cm - 3 in stock</option><option value="8405-99-1278125">8405-99-1278125 : 51cm - 1 in stock</option></select>
            </td>
            <td><input type="text" name ="qty_beret"></td>
            <td><input type="checkbox" name="checkbox_beret" value="Y"></td>
        </tr>
    </tbody>
</table>

Answer 1

好的，经过一番试验和错误后，它并没有我想象的那么难，也许我只是在偷懒。

选择复选框的简单javascript然后使用选择框上的onChange事件调用该函数。

唯一的缺点是每个复选框都必须有一个功能，但它确实有效！

Answer 2

我给了你2个选项，请阅读JavaScript评论：

// If you wanted to just toggle the checkox on, as soon
// as someone changes the value of the select box...
$( '.content' ).on( 'change', 'select', function (e) {
  var $this     = $( this ), // the select menu
      $row      = $this.parents( 'tr:first' ),
      $checkbox = $row.find( 'input[type=checkbox]' );
  
  $checkbox.prop( 'checked', true );
});

// If you wanted to toggle the checkbox on and off
// based on the user selecting something from the 
// select box (like default vs actual value)
$( '.content' ).on( 'change', 'select', function (e) {
  var $this     = $( this ), // the select menu
      $row      = $this.parents( 'tr:first' ),
      $checkbox = $row.find( 'input[type=checkbox]' );
  
  $checkbox.prop( 'checked', $this.val() !== 'no-value' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table width="820" class="content">
  <thead>
    <tr>
      <th>Category</th>
      <th>Code</th>
      <th>Quantity</th>
      <th>Issue?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Beret</td>
      <td>
        <select name="select_beret">
          <option value="no-value">Please select something</option>
          <option value="8405-99-1278122">8405-99-1278122 : 48cm - 2 in stock</option>
          <option value="8405-99-1278124">8405-99-1278124 : 50cm - 3 in stock</option>
          <option value="8405-99-1278125">8405-99-1278125 : 51cm - 1 in stock</option>
        </select>
      </td>
      <td><input type="text" name="qty_beret"></td>
      <td><input type="checkbox" name="checkbox_beret" value="Y"></td>
    </tr>
  </tbody>
</table>

Answer 3

这只是让一个函数为您的选择框运行所有更改事件的示例。 （如果/何时）您使用新的源代码更新您的问题并显示注释以解释每个步骤。

window.onload=function(){
var Selects=document.getElementsByClassName('Items');
for(var i=0; i<Selects.length; i++){
	Selects[i].addEventListener('change',function(){
		var Cbox=false;
		if(this.value!==""){
		Cbox=true;
		}
		document.getElementById('issue_'+this.id).checked=Cbox;
	},false);
}
}

Beret 
<select class="Items" id="beret" name="select_beret">
<option value="">Beret Sizes</option>
<option value="8405-99-9685843">Item 1</option>
<option value="8405-99-1847365">Item 2</option>
</select>
<input type="checkbox" id="issue_beret" value=""/><br>
Jumper
<select class="Items" id="jumper" name="select_jumper">
<option value="">Jumper Sizes</option>
<option value="8405-99-1717171">Item 1</option>
<option value="8405-99-3939393">Item 2</option>
</select>
<input type="checkbox" id="issue_jumper" value=""/><br>

我希望这会有所帮助。快乐的编码！