Question

这是我的表：

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

我正在尝试将复选框功能与下拉菜单链接：如果取消选中该复选框，并且用户选择其选项值不是“默认”的选项，则应自动选中该复选框并使用'选定'课程。然后，只要选择“默认”值，复选框就应该取消选中，并且不管其先前状态如何都不会突出显示。

Answer 1

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);
    }
});

Answer 2

首先是功能：

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";
    }
  }
}

然后选择一个onchage事件，如下所示：

<select name="select" id="select" onchange="selectValueChanged()">

Answer 3

尝试使用“onChenge”，如下所示：

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

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

3 个答案: