jquery - jQuery-如果两个元素具有一定的价值，那么做一些事情

Question

我有两个元素，一个单选按钮和一个选择菜单；如果每个元素都有一定的值，我想删除一个类

例如：如果选择值是1并且单选按钮值是然后1删除类。

我的问题是如何收听两种不同元素类型的元素

这是html文件：

<div id="select">
  <select name="family_state" class="ff" id="family_state">
    <option value="0">a</option>
    <option value="1">b</option>
    <option value="2">c</option>
    <option value="3">d</option>
    <option value="4">e</option>
  </select>
</div>

<div id="radio">

  <input id="mimun_a" name="mimun_nosaf" value="1" type="radio" required="" checked="">
  <label for="mimun_a">1</label>

  <input id="mimun_b" name="mimun_nosaf" value="0" type="radio" required="" checked="">
  <label for="mimun_nosaf">0</label>

  <div id="to-hide" class="hidden">
    this is the hidden div
  </div>

这是.js文件：

document.getElementById("mimun_a").addEventListener("click", tryit);
document.getElementById("mimun_b").addEventListener("click", tryit);
document.getElementById("family_state").addEventListener("change", tryit);

function tryit() {
  var select = $("#family_state").val();

  if ($("#mimun_a").is(":checked")) {
    if (select == 1) {
      $("to-hide").removeClass("hidden");
    };
  };
};

演示

谢谢

标签： jqueryaddeventlistener

Answer 1

;如果您从 if 段结束中删除它将起作用}

document.getElementById("mimun_a").addEventListener("click", tryit);
document.getElementById("mimun_b").addEventListener("click", tryit);
document.getElementById("family_state").addEventListener("change", tryit);

function tryit() {
  var select = $("#family_state").val();

  if ($("#mimun_a").is(":checked")) {
    if (select == 1) {
      $("#to-hide").removeClass("hidden");
    }
  }else if($("#mimun_b").is(":checked")){
     $("#to-hide").addClass("hidden");
  }
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
  <select name="family_state" class="ff" id="family_state">
    <option value="0">a</option>
    <option value="1">b</option>
    <option value="2">c</option>
    <option value="3">d</option>
    <option value="4">e</option>
  </select>
</div>

<div id="radio">

  <input id="mimun_a" name="mimun_nosaf" value="1" type="radio" required="" checked="">
  <label for="mimun_a">1</label>

  <input id="mimun_b" name="mimun_nosaf" value="0" type="radio" required="" checked="">
  <label for="mimun_nosaf">0</label>

  <div id="to-hide" class="hidden">
    this is the hidden div
  </div>

更正：

function tryit() {
  var select = $("#family_state").val();

  if ($("#mimun_a").is(":checked")) {
    if (select == 1) {
      $("#to-hide").removeClass("hidden");
    }
  }else if($("#mimun_b").is(":checked")){
     $("#to-hide").addClass("hidden");
  }
}