复选框和下拉菜单之间的事件绑定

Event binding between checkbox and dropdown menu

本文关键字：事件 绑定 之间 下拉菜单 复选框      更新时间：2023-09-26

这是我的表格:

<table>                    
  <tr>
    <td>
      <label for="check">
        <input type="checkbox" name="check" id="check" value="true" />
        Select something
      </label>
    </td>
    <td>
      <label for="select">
        <select name="select" id="select">
        <option value="Default"></option>
        <option value="A">A</option>
        <option value="B">B</option>
      </label>
    <td>
  </tr>

我试图将复选框功能与下拉菜单联系起来:如果复选框未选中，并且用户选择的选项值不是"Default"的选项，那么复选框应该自动选中并使用"selected"类突出显示。然后，当"Default"值被选中时，复选框应该被选中并且不突出显示，而不管它之前的状态如何。

jQuery("#check").on("click", function() {
    if(!jQuery(this).is(":checked")) {
        jQuery("#select").val("Default");
    }
});
jQuery("#select").on("change", function() {
    if(jQuery(this).val() === "Default") {
        jQuery("#check").attr("checked", false);
    }
});

尝试使用" onenge "，像这样:

<html>
<body>
<table>                    
  <tr>
    <td>
      <label for="check">
        <input type="checkbox" name="check" id="check" value="true" />
        Select something
      </label>
    </td>
    <td>
      <label for="select">
        <select name="select" id="select" onchange="Select_Change(this)">
        <option value="Default"></option>
        <option value="A">A</option>
        <option value="B">B</option>
      </label>
    <td>
  </tr>
<script>
    function Select_Change( elem ) 
    { 
        if (elem.value != 'Default')
        {
            CheckBox_Select( true );
        }
        else
        {
            CheckBox_Select( false ); 
        }
    }
    function CheckBox_Select( check ) 
    { 
        document.getElementById('check').checked = check; 
    }
</script>
</body>
</html>

第一个函数:

function selectValueChanged(){
  var selected = document.getElementById("select").selectedIndex;
  var options = document.getElementById("select").options;
  if(document.getElementById("check").checked){
    if(options[i].value == "Default"{
      document.getElementById("check").checked = false;
      document.getElementById("check").className = document.getElementById("check").className.replace(" selected", "");
    }
  else{
    if(options[i].value != "Default"){
      document.getElementById("check").checked = true;
      document.getElementById("check").className += " selected";
    }
  }
}

然后给select一个onchage事件，使它看起来像:

<select name="select" id="select" onchange="selectValueChanged()">
相关文章：