How can I target a div when a user checks a checkbox? Any advice on how to select an outer div when the checkbox is checked?
How can I target a div when a user checks a checkbox? Any advice on how to select an outer div when the checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
This code snippet will select the parent div that contains the checkbox. If your target element is not in the immediate parent, you can use more .parent() functions to navigate up the DOM tree.
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
If you want to target the div.target based on the above structure:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
In this case: $(this).parent() refers to div.checkboxDiv
$(this).parent().parent() refers to div.parent
...
Take a look at this jsFiddle example that demonstrates the usage in a straightforward manner:
You can use any other element you prefer, just experiment with the code and modify it according to your requirements. Feel free to reach out if you need further assistance!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: Thought you might find it helpful to understand 'how' CSS functions here:
I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...
I conducted a comparison of two images across various browsers. One image is an SVG while the other is a PNG format. Here are my findings: You can view the demo on JSFiddle here: http://jsfiddle.net/confile/2LL5M/ This is the code snippet I utilized: ...
Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...
Back in the days of Bootstrap 3, this was the trick: .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } Another approach that could have been used: .modal.fade .modal-dialog { transfor ...
Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...
Currently, I am honing my skills in Bootstrap by creating a simple example with 3 columns of varying sizes: 2, 8, and 2. However, I have noticed that on certain screen sizes, the contents within these columns overlap each other. My goal is to prevent this ...
Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...
Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, wheth ...
I have a question regarding jQuery 1.12. I am attempting to target an element within $(this). $(".select").bind('keydown', function(event) { elt = $(this)[0]; console.log(elt.outerHTML); elt = $(this)[0].search("li") console.log ...
Is it necessary to keep Three.js variables (scene, camera, renderer etc.) globally? I have devised a function that initializes canvas elements by taking a DOM position and other information to build the scene. This function is then passed to a render func ...
My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...
As someone who is new to web application development and browser extension creation, I have encountered a challenge with my browser extension. When the extension popup is open and I switch browser windows, the UI (popup.html) disappears. It reappears whe ...
It seems that there is an issue with the 'input' event when used with addEventListener() in conjunction with a color input box. Here is the HTML code: <input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p& ...
I am looking to dynamically update the value of a dropdown in index.php to a textbox in test.php using Ajax. The scenario involves having test.php embedded as an iframe within index.php. Upon changing the dropdown selection, the corresponding value should ...
Currently using netbeans 7.1 and curious about the possibility of selecting an entire HTML element such as a div tag. If I wanted to select the inner div for deletion: <div id="outer"> <div id="inner"> This is inner Content </ ...
My Snake game seems to have a bug that causes some strange behavior whenever an apple is collected. Upon collision, the apple disappears and a new one spawns in a new location, but then the original apple reappears in its initial spot. Subsequently, when t ...
I'm currently in the process of developing a website and I have started utilizing the style tag at the beginning: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
I want to create a website that collects book information using HTML and then saves it into a database for future use. Does anyone know how I can retrieve information from the Open Library website and store it in a database? Here is the link to the API f ...
Is there a way to apply an inset box-shadow to only one side of a div? I am specifically referring to an inset shadow, not the usual outer box-shadow. For instance, in the JSFiddle below, you can observe that the inset shadow is visible on all four sides, ...
Whenever I try to create an angle between two borders, I end up with a jagged (pixeled) line. Take a look at the code snippet below: <div id="example"></div> #example:before{ content: ""; position: relative; width: 0; he ...