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

DEMO

感谢的

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

Answer 2

$('#family_state').change(function () {
  if ($(this).val()!=0 && $('[name="mimun_nosaf"]:checked').length>0 && 
                     $('[name="mimun_nosaf"]:checked').val()==1)
         $("#to-hide").removeClass("hidden");
  else
        $("#to-hide").addClass("hidden");
});
 $('[name="mimun_nosaf"]').change(function () {
     if ($(this).val()==1 && $('#family_state').val()!=0)
            $("#to-hide").removeClass("hidden");
     else
             $("#to-hide").addClass("hidden");
  });

Answer 3

首先，我使用jQuery选择器而不是getElementById。不知何故，它看起来更加一致。您也可以按名称选择。这是我的答案：

$("[name='mimun_nosaf']").change(tryit);
$("#family_state").change(tryit);

function tryit() {
  var select = $("#family_state").val();
  var radio_val = $("[name='mimun_nosaf']:checked").val();

  if (select == 1 && radio_val == 1) {
      $("#to-hide").removeClass("hidden");
  };
};

您也可以使用“.click”事件监听器，但它会在单选按钮上注册任何单击。 “.change”监听器将仅在单选按钮的值时才会注册事件。

jQuery-如果两个元素具有某些值，那么就做一些事情

3 个答案: