无论输入位于何处,都可以输入

时间:2017-07-07 06:53:39

标签: javascript jquery

是否有插件可以检查输入是否正常工作,无论它们位于何处。我将制作大量无线电和复选框输入,这些输入将被隐藏在div中,但输入将需要在检查时控制多个div。我真的不想让所有这些都通过jquery单独工作。我宁愿让css负责检查时会发生什么。

div {
  position: absolute;
  background: rgba(85, 183, 255, 0.25);
}

.box2 {
  left: 120px;
}

.box3 {
  left: 240px;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
}

.a {
  width: 100px;
  height: 100px;
}

.b {
  width: 80px;
  height: 80px;
  left: 10px;
  top: 10px;
}

.c {
  width: 60px;
  height: 60px;
  left: 10px;
  top: 10px;
}

.container {
  position: absolute;
  width: 100px;
  height: 200px;
  top: 140px;
  background: rgba(85, 183, 255, 0.25);
}

.con2 {
  left: 120px;
}

.con3 {
  left: 240px;
}

.alter {
  postion: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255, 0, 0, 0.5);
  left: 10px;
  top: 60px;
  transition: 1s;
}

.radio1:checked ~ .me1 {
  background: green;
}

.radio2:checked ~ .me2 {
  height: 100px;
  top: 50px;
}

.radio2:checked ~ .me3 {
  transform: scale(2px);
}
<div class="a box1">
  <div class="b">
    <div class="c">
      <input type="radio" name="radio" class="radio1">
    </div>
  </div>
</div>
<div class="a box2">
  <div class="b">
    <input type="radio" name="radio" class="radio2">
  </div>
</div>
<div class="a box3">
  <div class="b">
    <div class="c">
      <input type="radio" name="radio" class="radio3">
    </div>
  </div>
</div>


<div class="container con1">
  <div class="alter me1"></div>
</div>
<div class="container con2">
  <div class="alter me3"></div>
</div>
<div class="container con3">
  <div class="alter me3"></div>
</div>

1 个答案:

答案 0 :(得分:0)

我不太确定,你打算做什么,但也许这会有所帮助。 一旦选中一个单选按钮,代码就会触发,然后检查是否选中了所有单选按钮框。

您可能可能会执行其他操作,而不是显示继续链接。 希望这会有所帮助,否则会更清楚地表明你打算做什么。

$(":radio").change(function() {
        var names = {};
        $(':radio').each(function() {
            names[$(this).attr('name')] = true;
        });
        var count = 0;
        $.each(names, function() {
            count++;
        });
        if ($(':radio:checked').length === count) {
            $('#linkContinue').show();
        }
    }).change();