Develop Reference

I need to make animation appear randomly on same type of div but different ILs, everytime I hit a checkbox

The animation has to appear randomly on my letters, using only 1 checkbox or it can appear from 1st to the last one but with the delay, if you can do both please show me <3. Probably JS needed. (I'm new to code). I only managed to make it appear as single stroke with 1 checkbox and the animation applied to all letters, but it's not what I want because the color is the same on every letter.
HTML
<div class="word">
<ul>
<li style="position: relative;">
<input type="checkbox" />
<div class=beautiful>H</div>
</li>
<li >
<input type="checkbox" />
<div class=beautiful>E</div>
</li >
<li>
<input type="checkbox" />
<div class=beautiful>L</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>L</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>O</div>
</li>
<li class="apellido"">
<input type="checkbox" />
<div class=beautiful>W</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>O</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>R</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>L</div>
</li>
<li>
<input type="checkbox" />
<div class=beautiful>D</div>
</li>
</ul>
</div>
CSS
ul {
margin-left: auto;
margin-right: auto;
display: flex;
}
li {
list-style: none;
}
label {
margin-left: auto;
margin-right: auto;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
margin-top: 30px;
margin-left: -330px;
width: 40px;
height: 40px;
z-index: 1;
}
input[type="checkbox"]:checked ~ div {
color: yellow;
text-shadow: 0 0 15px yellow, 0 0 25px yellow;
animation: glow 2s linear infinite;
}
.beautiful {
font-family:'Lucida Sans', Arial, sans-serif;
font-size:50px;
color:rgb(255, 255, 255);
font-style:italic;
font-weight:bold;
text-shadow: 5px 1px 9px rgb(0, 0, 0);
-webkit-text-stroke: 2px white;
color: #1b1e24;
display: flex;
cursor: pointer;
}
#keyframes glow {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.body {
display: flex;
}
.word {
display: flex;
margin-right: 33px;
}

I made the assumption that you only had 1 checkbox per letter based on your attempts and that this wasn't a requirement.
My example uses 3 different methods of activating your animation: All at once, in order (one-by-one), and random (one-by-one).
Using querySelectorAll in JavaScript, you can get all of the elements containing letters (as they all have the beautiful class). From here, you can either immiately enable the animation by adding a class, or loop through each element/letter and add the class for a one-by-one effect.
// All at once
document.querySelector("#allAtOnce").addEventListener("click", e => {
document.querySelectorAll(".beautiful").forEach(l => l.classList.toggle("colors", e.target.checked))
})
// In order
document.querySelector("#inOrder").addEventListener("click", e => {
_LightUp(Array.from(document.querySelectorAll(".beautiful")), e.target);
})
// random
document.querySelector("#random").addEventListener("click", e => {
_LightUp(Array.from(document.querySelectorAll(".beautiful")).sort((a, b) => Math.random()-.5), e.target);
})
const _LightUp = (letters, checkbox) => {
letters[0].classList.toggle("colors", checkbox.checked)
letters.splice(0, 1);
if(letters.length) setTimeout(_LightUp, 100, letters, checkbox);
}
ul {
margin-left: auto;
margin-right: auto;
display: flex;
}
li {
list-style: none;
}
label {
margin-left: auto;
margin-right: auto;
}
input[type="checkbox"] {
cursor: pointer;
width: 16px;
height: 16px;
vertical-align: middle;
}
.beautiful {
font-family:'Lucida Sans', Arial, sans-serif;
font-size:50px;
color:rgb(255, 255, 255);
font-style:italic;
font-weight:bold;
text-shadow: 5px 1px 9px rgb(0, 0, 0);
-webkit-text-stroke: 2px white;
color: #1b1e24;
display: flex;
cursor: pointer;
}
.colors {
color: yellow;
text-shadow: 0 0 15px yellow, 0 0 25px yellow;
animation: glow 2s linear infinite;
}
#keyframes glow {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.body {
display: flex;
}
.word {
display: flex;
margin-right: 33px;
}
<div class="word">
<ul>
<li>
<div class=beautiful>H</div>
</li>
<li>
<div class=beautiful>E</div>
</li>
<li>
<div class=beautiful>L</div>
</li>
<li>
<div class=beautiful>L</div>
</li>
<li>
<div class=beautiful>O</div>
</li>
<li style="margin: 0 0 0 1em;">
<div class=beautiful>W</div>
</li>
<li>
<div class=beautiful>O</div>
</li>
<li>
<div class=beautiful>R</div>
</li>
<li>
<div class=beautiful>L</div>
</li>
<li>
<div class=beautiful>D</div>
</li>
</ul>
</div>
<input id="allAtOnce" type="checkbox" /> All At Once
<br>
<input id="inOrder" type="checkbox" /> In Order
<br>
<input id="random" type="checkbox" /> Random

How to Remove disable attribute from a button after input validation?

I have a form with a disabled button at first and if you leave an input empty or fill it with anything but numbers it will raise an error and if you insert number the error will be removed. My question is how can I remove disable attribute from the button after all inputs are error free.
Here what I've tried so far:
$("input").blur(function () {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
} else {
$(this).removeClass("raise-error");
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>

You can give the inputs a default attribute like data-valid="false".
When a field is blurred, you can change the attribute's value to true after successfully validating it.
You can then enable the button if all the data-valid="false" are changed to data-valid="true"
Try this
$("input").blur(function() {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
$(this).attr('data-valid', 'false');
} else {
$(this).removeClass("raise-error");
$(this).attr('data-valid', 'true');
}
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error+.error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" data-valid="false" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
</div>

The most straight forward way and safest is to reuse your validation function for testing both if the input is valid, and testing if all inputs are valid.
The example below puts the inputs where blur is attached to in the allInputs variable, and the button is disabled if not all inputs are valid (with the every function calling the same isValid functionality)
const allInputs = $("input").blur(function () {
const isValid = val => val !== "" && Number(val);
$(this).toggleClass("raise-error",!isValid(this.value));
$('.btn')[0].disabled = !allInputs.toArray().every(i=>isValid(i.value));
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>

If below code doesn't work:
if ($('.raise-error').length > 0) {
$('.btn').attr( 'disabled', true );
return true;
}
Then please try to change the button tag with:
<input type="button" class="btn">

CSS - li background color on checked radio

I am stuck with this code. I want to change the background color of the li when the respective radio button is selected. Please see attached fiddle for a demo.
Is it possible to do without editing the original html as this is produced by a core file that I don't really want to edit?
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Thanks in advance.

Since #kevin-lewis already mentioned, that there are no parent selectors in css, in order to have a pure css solution, we need to cheat a bit with styling the <label> tag, so that it fills the whole parent <li> element (using absolute positioning) and has the same margins and borders. The only fiddly bit that may not work reliably is the left padding of the styled <label> - it has to take into account the width of the radio button - hence the "magic" 2.6em.
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input:checked + label{
display: inline-block;
background-color: DodgerBlue;
height: 100%;
width: 100%;
z-index: -1;
padding: .5em 1em;
padding-left: 2.6em;
border: 1px transparent;
border-radius: 4px;
box-sizing: border-box;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

I suppose you need to change the color of the parent li. In this case this is how I am doing it.
let imps = Array.from(
document.querySelectorAll(".wc-deposits-option [type='radio']")
);
imps.map((r) => {
r.addEventListener("change", () => action(r));
window.onload = (() => action(r));
});
function action(r){
// this function is called when the window loads & when a radio button is clicked
imps.map( R => {R.parentElement.style.background = "white";})
if (r.checked) {
r.parentElement.style.background = "gold";
}
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
I hope this is what you need.
UPDATE
Yet an other JavaScript solution is to check the radio when you click the <li>parent. I think this is more UI friendly.
let lis = Array.from(
document.querySelectorAll(".wc-deposits-option li")
);
lis.map((li) => {
li.addEventListener("click", () => action(li));
window.onload = (() => action(li));
});
function action(li){
lis.map((_li) => {_li.style.background = "white"});
let thisRadio = li.querySelector("[type='radio']");
thisRadio.checked = true;
li.style.background = "gold"
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Use onclicks for each radio element
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Then use the following js code:
function toggleBackground(type) {
if(type) {
document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
document.getElementById('wc-option-pay-full').style.background = 'color-2';
} else {
document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
document.getElementById('wc-option-pay-full').style.background = 'color-1';
}
}

Add :checked for radio in css and background-color: #ff0000;
Test
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input[type=radio]:checked + label {
background-color: #ff0000;
font-style: normal;
}
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

Please review solution link below. I used javascript to fixed this problem.
I hope this answer will be helpful for you
https://codepen.io/dev_aman/pen/YOxjpR

Using vanilla JavaScript :
function toggleItem ( input )
{
input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}
function toggleOptions ()
{
let
list = document.querySelector( '.wc-deposits-option' ),
checked = list.querySelector( 'input:checked' );
toggleItem( checked );
list.addEventListener( 'input', () => {
let target = event.target;
toggleItem( target );
toggleItem( checked );
checked = target;
});
}
toggleOptions();
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
.wc-deposits-option-checked
{
background-color: #00F;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

CSS checkbox styling not working

I have my checkboxes and I am trying to style it with the following CSS.
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
The checkboxes are inside my form.
This does not work when I click my checkbox. I am new to styling and let me know where the error is.

You have spaces around the name in the for attribute, remove them.
Working demo:
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
/*added this to show the behavior here on SO*/
background-color: #000
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for="id_contract_name">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for="id_is_ceo">
<span></span> CEO?
</label>
</div>

You have to mention id or class in CSS.
And if you want to add css dynamically then you have to use javascript or jquery.
#id_contract_name{
display: none;
border: none !important;
box-shadow: none !important;
}
#id_is_ceo {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<html>
<body>
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
</body>
</html>

if has no child how to not toggle?

Hi I develop checkbox and I have some issue.if my li parents has no ul child it musn't be toggle. I'm talking about red arrows which is the left of li element.
I got solved problem thanks to #Arun P Johny just one more thing left I have to do is when clicked label checkbox musn't be checked only thoose which has got ul child
see my codeson codepen
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
 
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jquery codes
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});

You can use the has-checked class to style the element, there is no need to have a new class
$(document).ready(function() {
$('.new-checkbox li:has(ul)').addClass('parent');
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.parent.has-checked:before {
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- new checkbox-->

Replace Code
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
From
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
Codepen Demo