Question

我想在表单中有一个复选框，但我需要实现多个场景，但不确定是否可以使用单个复选框或者如果我需要单选按钮。请指教

框显示并选中：已接受/是
（隐藏）显示的框未检查：拒绝/否
未显示框：未显示/空白

Answer 1

不确定是否可以使用单个复选框


框显示并选中：已接受/是

（隐藏）显示的框未检查：拒绝/否

未显示框：未显示/空白

如果使用单个复选框可以满足1/2/3的要求。我问的原因是单个复选框只能容纳一个值，如果有办法我可以动态地改变Jquery中的值仍然满足所有要求。

是的，有可能。您可以创建一个对象，其属性设置为选择器:checked，:not(:checked, :hidden)，:hidden;相应的值设置为yes，no，blank。使用change循环for..in

在.is()事件处理程序中设置变量

var obj = {
  ":checked": "yes",
  ":not(:checked, :hidden)": "no",
  ":hidden": "blank"
};
var curr;
$(":checkbox").change(function() {
  for (var prop in obj) {
    if ($(this).is(prop)) {
      curr = obj[prop]; break;
    }
  }
  // do stuff with `curr`
  console.log(curr);
});

// check `:hidden`
$(":checkbox").prop("hidden", true)
.change()  // `curr` should log `blank`
.prop("hidden", false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="checkbox" />

Answer 2

我创建了一个onchange函数示例，您可以在其中处理多个事件

codepen URL供参考： http://codepen.io/nagasai/pen/xOGNYW

        <input type="checkbox" id="checkTest" onchange="myFunction()">

        <input type="text" id="myText" value="checked">



        #myText
        {
          display:none;
        }



              function myFunction() {
                if (document.getElementById("checkTest").checked) {
                  document.getElementById("myText").style.display = "block";
                } else {
                  document.getElementById("myText").style.display = "none";
                }
              }

单个复选框的多个条件

2 个答案: