javascript - 选中一个复选框以选中所有，自定义复选框

标签 javascript jquery html css checkbox

我希望选中“偶数”框以取消选中我的 fiddle 中列出的所有偶数。它目前可以正常工作，但我希望在未显示相应数字时取消选中每个偶数的单独框(一旦您看到 fiddle ，它就会更有意义)。

如果取消选中“偶数”，我希望“二”、“四”和“六”框变为灰色，并在选中“偶数”后再次变为粉红色。

目前，复选框可以正常工作，但不能全部正确显示。

$(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).attr("value") == "evennumbers") {
      if (this.checked) {
        $(".two.number").show();
        $(".four.number").show();
        $(".six.number").show();
      } else {
        $(".two.number").hide();
        $(".four.number").hide();
        $(".six.number").hide();
      }
    }
  });
});

$(function() {
  $('.hide_this').fadeOut(1)
})

$(function() {
  $('input[type="checkbox"]').change(function() {
    if ($(this).attr("value") == "two") {
      if (this.checked) {
        $(".two.number").show();
      } else {
        $(".two.number").hide();
      }
    }
    if ($(this).attr("value") == "four") {
      if (this.checked) {
        $(".four.number").show();
      } else {
        $(".four.number").hide();
      }
    }
    if ($(this).attr("value") == "six") {
      if (this.checked) {
        $(".six.number").show();
      } else {
        $(".six.number").hide();
      }
    }
    if ($(this).attr("value") == "one") {
      if (this.checked) {
        $(".one.number").show();
      } else {
        $(".one.number").hide();
      }
    }
  });
});
#demo {
  margin: 30px 0 50px 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#demo .wrapper {
  display: inline-block;
  width: 180px;
  margin: 0 10px 0 0;
  height: 20px;
  position: relative;
}
#demo .parent {
  width: 100%;
  display: block;
  cursor: pointer;
  line-height: 30px;
  height: 30px;
  border-radius: 5px;
  background: #F9F9F9;
  border: 1px solid #AAA;
  border-bottom: 1px solid #777;
  color: #282D31;
  font-weight: bold;
  z-index: 2;
  position: relative;
  -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
  -webkit-transition-delay: .8s;
  text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
  background: #fff;
  -webkit-transition-delay: 0s, 0s, 0s;
}
#demo .content:hover ~ .parent {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 0;
}
#demo .content {
  position: absolute;
  top: 0;
  display: block;
  z-index: 1;
  height: 0;
  width: 180px;
  padding-top: 30px;
  -webkit-transition: height .5s ease;
  -webkit-transition-delay: .4s;
  border: 1px solid #777;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
#demo .wrapper:active .content {
  height: 153px;
  z-index: 3;
  -webkit-transition-delay: 0s;
}
#demo .content:hover {
  height: 153px;
  z-index: 3;
  -webkit-transition-delay: 0s;
}
#demo .content ul {
  background: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#demo .content ul a {
  text-decoration: none;
}
#demo .content li:hover {
  background: #eee;
  color: #333;
}
#demo .content li {
  list-style: none;
  text-align: left;
  color: #888;
  font-size: 14px;
  line-height: 30px;
  height: 30px;
  padding-left: 10px;
  border-top: 1px solid #ccc;
}
#demo .content li:last-of-type {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
input[type=checkbox] {
  visibility: hidden;
}
.styledCheckbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.styledCheckbox {
  width: 16px;
  height: 16px;
  background: #ddd;
  margin: 5px 0;
  position: relative;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.styledCheckbox label {
  display: block;
  width: 10px;
  height: 10px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #333;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.styledCheckbox input[type=checkbox]:checked + label {
  background: deeppink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="demo">
    <div class="wrapper">
      <div class="content">
        <ul>
          <li>
            <section>
              <div class="styledCheckbox" style="text-align: center">
                <input type="checkbox" id="evennumbers" name="colorCheckbox" value="evennumbers" checked>
                <label for="evennumbers">
                  <p style="margin-left: 20px; margin-top: -10px; font-weight: bold">
                    Even_Numbers
                  </p>
                </label>
              </div>
            </section>
          </li>
          <li>
            <section>
              <div class="styledCheckbox" style="text-align: center">
                <input type="checkbox" id="one" name="one" value="one" checked>
                <label for="one">
                  <p style="margin-left: 20px; margin-top: -10px; font-weight: bold">
                    One
                  </p>
                </label>
              </div>
            </section>
          </li>
          <li>
            <section>
              <div class="styledCheckbox" style="text-align: center">
                <input type="checkbox" id="two" name="colorCheckbox" value="two" checked>
                <label for="two">
                  <p style="margin-left: 20px; margin-top: -10px; font-weight: bold">
                    Two
                  </p>
                </label>
              </div>
            </section>
          </li>
          <li>
            <section>
              <div class="styledCheckbox" style="text-align: center">
                <input type="checkbox" id="four" name="colorCheckbox" value="four" checked>
                <label for="four">
                  <p style="margin-left: 20px; margin-top: -10px; font-weight: bold">
                    Four
                  </p>
                </label>
              </div>
            </section>
          </li>
          <li>
            <section>
              <div class="styledCheckbox" style="text-align: center">
                <input type="checkbox" id="six" name="colorCheckbox" value="six" checked>
                <label for="six">
                  <p style="margin-left: 20px; margin-top: -10px; font-weight: bold">
                    Six
                  </p>
                </label>
              </div>
            </section>
          </li>
        </ul>
      </div>
      <div class="parent">Display These #s</div>
    </div>
  </div>
</div>


<div class="number one" style="text-align: center; font-size: xx-large">
  <p>one</p>
</div>
<div class="number two" style="text-align: center; font-size: xx-large">
  <p>two</p>
</div>
<div class="number four" style="text-align: center; font-size: xx-large">
  <p>four</p>
</div>
<div class="number six" style="text-align: center; font-size: xx-large">
  <p>six</p>
</div>

View on JSFiddle

最佳答案

将您的 evennumbers 复选框单击处理程序更改为如下所示:

$('input[type="checkbox"]').click(function() {
  if ($(this).attr("value") == "evennumbers") {
    if (this.checked) {
      $(".even").show();
      $(".even-checkbox").prop('checked', true);
    } else {
      $(".even").hide();
      $(".even-checkbox").prop('checked', false);
    }
  }
});


将类 even-checkbox 添加到二、四和六的复选框:

<input class="even-checkbox" type="checkbox" id="two" name="colorCheckbox" value="two" checked>


给二号、四号、六号的div加上cla​​ss even:

<div class="number one" style="text-align: center; font-size: xx-large">
<p>one</p>


<div class="number two even" style="text-align: center; font-size: xx-large">
<p>two</p>


<div class="number four even" style="text-align: center; font-size: xx-large">
<p>four</p>


<div class="number six even" style="text-align: center; font-size: xx-large">
<p>six</p>

关于javascript - 选中一个复选框以选中所有，自定义复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36586163/

上一篇：html - 使用 Chrome 内容扩展在 Apps 脚本代码编辑器中获取滚动条元素

下一篇：css - 如何在不影响其他盒子的情况下对齐 flex box 中的底部 "row"？

相关文章：

javascript - 如何使用 JQuery 获取 CSS 属性的值？

javascript - three.js - 间隔渲染管几何

javascript - Hover()、mouseenter()、mouseover() 等来回跳跃

javascript - 横幅旋转器的动态轮播指示器

javascript - 如何覆盖事件文本光标 (Safari)？

javascript - 按一次链接时隐藏链接中的图像

javascript迭代div改变背景颜色

javascript - 如何在元素上设置默认 focus()

ruby-on-rails - Rails link_to 解释 :class and :style as params for the :action?

html - 如何仅使用 CSS/HTML 拉伸(stretch)/缩小任何尺寸的图像以最适合正方形？

©2024 IT工具网  联系我们