选中下拉选项上的复选框

我正在寻找一种方法，以便在从下拉菜单中进行选择时自动选中复选框。 HTML代码看起来是这样的：选中下拉选项上的复选框

<table> 
    <tr> 
     <td> 
      <input type="checkbox" name="check1" />Process 1:</td> 
     <td> 
      <select id="process1" name="process1"> 
       <option value="null">--Select Process--</option> 
       <option value="NameA">NameA</option> 
       <option value="NameB">NameB</option> 
       <option value="NameC">NameC</option> 
      </select> 
     </td> 
    </tr> 
</table>

如果可能的话，如果用户返回并选择--Select Process--，该复选框将取消

会是什么样的Javascript代码看起来像这个？

来源

2013-02-21 user906153

$(function(){ 
    $('#process1').change(function() { 
     var selected = $('#process1 option:selected'); 
     if (selected.val() == "null") { 
      $('input[name="check1"]').prop('checked', false); 
     } 
     else { 
      $('input[name="check1"]').prop('checked', true); 
     } 
    }); 
});

来源

2013-02-21 20:12:20 oleron

您可以使用相同类型的逻辑来检查对数据库中的价值？我的下拉列表中填入了来自数据库的类别，并根据该类别的值，我的网格中的一行或多行将选中复选框。 – jlg 2013-10-31 16:52:08

试试这个：

DEMO

function setChk(value){ 
    var chk = document.getElementById('check1'); 
    chk.checked = (value != 'null'); 
}

HTML

<table> 
    <tr> 
     <td> 
      <input type="checkbox" name="check1" id="check1"/>Process 1:</td> 
     <td> 
      <select id="process1" name="process1" onchange="setChk(this.value);"> 
       <option value="null">--Select Process--</option> 
       <option value="NameA">NameA</option> 
       <option value="NameB">NameB</option> 
       <option value="NameC">NameC</option> 
      </select> 
     </td> 
    </tr> 
</table>

来源

2013-02-21 20:16:39 Mate

jQuery的会更容易些，但在JavaScript中，尝试添加一个onchange ATT ribute的选择：

onchange="checkValue()"

然后在javascript：

function checkValue() { 
    var e = document.getElementById("process1"); 
    var value = e.options[e.selectedIndex].value; 
    if (value == "null") { 
     document.getElementById("check1").checked=false; 
    } else { 
     document.getElementById("check1").checked=true; 
    } 
}

一个id只需添加到复选框ID = “CHECK1”

来源

2013-02-21 20:20:09

This答案是真的很酷！

但如果你打开，将使用jQuery则代码应该是这样的：

jQuery(document).ready(function() { 
    jQuery('#process1').on('change', function() { 
     var selectedVal = jQuery(this).find('option:selected').val(), 
      checkbox = jQuery('input[name="check1"]'); 
     if (selectedVal !== 'null') { 
      checkbox.attr('checked', 'checked'); 
     } else { 
      checkbox.removeAttr('checked'); 
     } 
    }); 
});

Demo

来源

2013-02-21 20:20:32

选中下拉选项上的复选框

回答

相关问题