Установите флажок, чтобы проверить все, настраиваемый флажок

Я хочу, чтобы флажок «четные цифры» отменил все четные числа, указанные в моей скрипке. В настоящее время он работает функционально, но я хочу, чтобы отдельный ящик для каждого четного номера снимал флажок, когда соответствующий номер не отображается (это будет иметь больше смысла, как только вы увидите скрипку).Установите флажок, чтобы проверить все, настраиваемый флажок

Если вы снимете «четные числа», я хочу, чтобы «два» «четыре» и «шесть» ящиков стали серыми, и снова стали розовыми, когда вы проверяете «четные числа».

В настоящее время флажки работают функционально, но не все отображаются правильно.

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

источник

2016-04-12 codergirl789

К сожалению, я не могу увидеть вашу скрипку еще. – alfadog67

Изменить 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); 
    } 
    } 
});

Добавить класс четного флажок флажков для двух, четыре , и шесть:

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

Добавить класс даже дивы номер два, номер четыре и номер шесть:

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

источник

2016-04-13 00:16:38

Спасибо, но я не уверен, правильно ли объяснил проблему. Когда я снимаю «четные цифры», цифры 2, 4 и 6 не отображаются, но их соответствующие галочки остаются «отмеченными» (ярко-розовыми). – codergirl789

Эта линия заботится об этой проблеме. '$ (". even-checkbox "). prop ('checked', false);' –

[См. этот JSFiddle] (http://jsfiddle.net/DanThomson/yfx6pL0b/1/) –

Установите флажок, чтобы проверить все, настраиваемый флажок

ответ

Смежные вопросы