Scss: Change Element Style If Child Input Is Checked or Not

SCSS : change element style if child input is checked or not

No, there is no CSS selector that allows one to style an element based on the state of its children.

Changing the Style of a specific element by Checkbox:Checked

There is a way to make this happen, but it's to use exactly the same "trick" with which you style the <label> elements, specifically by moving the <input> elements ahead of the element you wish to style.

With that in mind, if the <input> elements are preceding siblings of the <div>, then checking, and unchecking, the <input> can have an effect on the <div>, and also the original <label> elements as well.

As a crude example:

input[type="checkbox"][name^="vehicle"] {
  display: absolute;
  position: absolute;
  opacity: 0;
}

/* styles the <div> based on the checked/unchecked state
   of the <input> (this example assumes that the same
   highlight colour should be used regardless of which
   <input> is checked: */
input[type="checkbox"][name^="vehicle"]:checked ~ div {
  background-color: #ccc;
}

/* this is where it becomes obvious that JavaScript (or,
   ideally, a CSS selector that can refer to an attribute-
   variable) makes more sense; though with a CSS
   pre-processor this can be written effectively enough.
   Here when the #vehicle1 element is checked the <label>
   descendents with a "for" attribute equal to "vehicle1" of
   later-sibling <ul> elements are selected and styled: */
#vehicle1:checked~ul label[for=vehicle1] {
  background-color: gray;
}

/* as above, for the "vehicle2" id and for attributes: */
#vehicle2:checked~ul label[for=vehicle2] {
  background-color: gray;
}

#vehicle3:checked~ul label[for=vehicle3] {
  background-color: gray;
}

ul li {
  display: inline-block;
  padding: 20px;
  margin: 20px;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

Change parent div on input[type=checkbox]:checked with css

No way to select a parent with CSS only (until CSS4), so you must use JS..

See this post that talking about it here.

Apply to style to parent on hover child and if parent is enabled

Try this

& input[type=checkbox]:checked {
       color: #007884;
          cursor: pointer;
}

https://jsbin.com/hasuwumuxe/edit?html,css

How to select the parent element when child element checked?

there's no way in css to do this
but instead you can use the css "+" selector which select element immediately after the selected element

check this link http://www.w3schools.com/cssref/sel_element_pluss.asp

CSS pseudo-class :checked apply to parents

The current CSS Selectors Level 4 working draft proposes the relational pseudo-class :has(), so this should be possible in the future:

div:has(> label > input[type=checkbox]:checked) {
   /* ... */
}

However, no browser supports this pseudo-class selector as of the time of this writing.

Currently, it is not possible to "select an ancestor element" with CSS alone. For the time being, you will have to keep using the sibling selector or use some JavaScript to listen for change events on the checkbox and select its ancestor element.

styling an element when checkbox is checked

You are having a div inside a p tag, thats causing the issue, Change your structure and CSS like shown below.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
.abc {  position: relative;  text-align: center;  height: 100px;  font: 100px/1em sans-serif;  top: 50vh;  transform: translateY(-50%);}
input {  visibility: hidden;}
label {  cursor: pointer;}
input+label:before {  border: 1px solid #333;  content: "\00a0";  display: inline-block;  height: 100px;  width: 100px;  margin: 0 1em 0 0;  border-radius: 50%;}
input:checked+label:before {  border: none;  background: #fff;  color: #333;  content: "\2713";  text-align: center;}
input:checked+label:after {  font-weight: bold;}
input:focus+label::before {  outline: rgb(59, 153, 252) auto 5px;}
.def {  width: 100px;  height: 100px;  top: 50%;  left: 50%;  position: absolute;  transform: translate(-140%, -50%);  z-index: -1;}
span {  background: green;  width: 20px;  height: 20px;  top: 50%;  left: 55%;  transform: translate(-50%, -55%);  position: absolute;  border-radius: 50%;}
span:nth-child(1) {  left: 120%;  /*  background:green; */}
span:nth-child(2) {  top: 115%;  /*  background:red; */}
span:nth-child(3) {  left: -10%;  /*  background:blue; */}
span:nth-child(4) {  top: -10%;  /*  background:yellow; */}

/* styles for  span when checkbox is checked */
input:checked~div span {  background: red;}

<div class="abc">  <input type="checkbox" id="c1" />  <label for="c1">c1</label>  <div class="def">    <span></span>    <span></span>    <span></span>    <span></span>  </div></div>

Check if a checkbox is checked and apply style to parent element with jquery

Your example isn't working because $("this") attempts to select an element with a tag type of <this>. Since that element doesn't exist, nothing is selected.

Normally, $("this") should be $(this) (since this is a keyword and not a string), however in your case, it doesn't refer to the element that you think it does because it doesn't look like there is any scope. In your case, the variable this probably refers to the window object; you can always check with console.log(this).

---

As for a solution, you could iterate over the elements using the .each() method in order for this to refer to the current checked input element. You also don't need to chain the .parent() method four times since you can use the .closest() method in order to select the specified closest ancestor:

Example Here

$('ul.children input[name="post_category[]"]:checked').each(function() {
  $(this).closest('.children').prev('label').css('color', '#f00');
});

---

Of course you don't actually need to use .each() method since you can just select the elements directly.

In the line below, the :has() selector is used in order to select ul.children elements that have checked input[name="post_category[]"] descendant elements. From there, the previous label element is selected and the corresponding CSS is changed:

Example Here

$('ul.children:has(input[name="post_category[]"]:checked)').prev('label').css('color', '#f00');

---

As a side note, if you want to put this in a change event listener, it would look something like this:

Updated Example

$('ul.children input[name="post_category[]"]').on('change', function() {
  $(this).closest('.children').prev('label').toggleClass('selected', this.checked);
});

---

Related Topics