选中一个复选框以选中全部，自定义复选框

时间：2016-04-12 23:58:39

标签： javascript jquery html css checkbox

我希望检查＆＃34;偶数＆＃34;框取消选中我小提琴中列出的所有偶数。它目前在功能上有效，但我希望在没有显示相应的数字时取消选中每个偶数的单个框（一旦看到小提琴就会更有意义）。

如果您取消选中＆＃34;偶数＆＃34;我想要＆＃34;两个＆＃34; ＆＃34; 4＆＃34;和＆＃34;六＆＃34;一旦检查＆＃34;偶数，就会变成灰色，然后再变成粉红色。＆＃34;

目前，复选框在功能上有效，但并未全部正常显示。

＆＃13;
＆＃13; 
$(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();
      }
    }
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

View on JSFiddle

1 个答案:

答案 0 :(得分：1)

将偶数条目复选框单击处理程序更改为如下所示：

$('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);
    }
  }
});


将class even-checkbox添加到两个，四个和六个复选框：

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


将类添加到二号，四号和六号的div：

<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>

相关问题
最新问题