Is it possible to add a class to the parent element when the input value of a sub-child element is

Is there a way to select and add a class to an li element in which the sub-child input is empty when clicking on button #btn-modal-clear? If so, what is the best approach to achieve this?

Example HTML Code:

<li>...<li> 
<li>
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li>     

Example Javascript Code:

$('#btn-modal-clear').on('click', function() {  
    $('.select-name').multiselect('select', ['']);
    $('.select-name').multiselect('updateButtonText');

    ... .addClass("active"); 

});

The expected result should be:

Updated HTML Code:

<li>...<li> 
<li class="active">
    <a class="myCheckboxLink" tabindex="0">
        <span class="myCheckboxSpan">
            <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
        </span>
        <label class="radio">
            <input value="" type="radio">Name
        </label>
    </a>
</li>
<li>...<li> 

Fiddle with Example: https://jsfiddle.net/ewm9pbqv/

Answer №1

To achieve the desired outcome, utilize the combination of .filter() and .addClass():

$('span').filter(function() { 
   return $(this).find('input:checkbox').val() == ""; 
}).addClass('selected');

Answer №2

Check out this solution

$('li input[value=""]').closest("li").addClass('active');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove an element from a mapping of type <String,String> in Javascript

Question! How can I remove a specific element from this JavaScript object by its ID? [ "{\"id\":\"b00a3a47-783a-4af5-90d9-59c4deb7a9e3\",\"notes\":\"sdfsdf\",\"recordType\":0}", "{\"id\": ...

Unlock the power of Odoo by learning how to seamlessly add custom field attributes without the need for modification

Currently, I am facing an issue with using my custom attribute for fields known as sf_group. The problem is that this attribute is not included in the field description retrieved via fields_get(). Is there a way to incorporate this custom attribute into th ...

Incorporating external CSS and JS files into your WordPress website

Hello, I am unfamiliar with the Wordpress framework and I am seeking guidance on how to add an external CSS and JS file to my Wordpress page. I have successfully created a new page, but would like to incorporate a CSS and JS file into it. Would creating a ...

What specific URL should be included in a JavaScript ajax request?

As I delve into creating a JSON file using an ajax request in javascript, confusion strikes when it comes to determining the appropriate URL. With no previous experience working server side and relying on WAMP server 3.0.6 to host my project-in-the-works ...

What strategies can be implemented to maximize the effectiveness of Office ribbon commands within an AngularJS application?

Currently, I have developed an Office add-in using AngularJS (version 1.4) and ASP.NET MVC 4.5. The Angular controller and service JS files contain a significant amount of functionality that has already been implemented. Lately, I have been exploring the ...

Iterate through the contents of a directory and display the HTML content corresponding to each file

Currently, I am diving into the world of PHP Laravel. The project I am working on involves repeating blocks of HTML code in my template, which I want to streamline using a loop. My idea is to automate this process by implementing a foreach loop in my Vue ...

Exploring the process of breaking down a substantial string object into manageable key/value pairs using AngularJS

I gathered information from a text file called sample_resume.txt Name: John Doe Phone: (555) 555-5555 Email: [email protected] TARGET To succeed in the field of web development. SKILL SET Development: HTML5, JavaScript, Bootstrap, AngularJS, Rea ...

Converting an image to a link is not effective

Currently facing a challenge trying to turn a list of images into clickable links. Here's how I have set them up in my HTML code: <a href="plantvb1.html" class="plant1"><img src="img/plnt1_.png"></a> and this is how they are style ...

(HTML)(PHP)Restricting Access to Login Page

My user page is the only one being accessed for both users and admins. Within my database and table, each are divided by 'type', where 0 represents a user and 1 represents an admin. Here is my code: <?php session_start(); include 'dbcon. ...

Remove any words that are not included in the specified list

Here is the code snippet to achieve the desired functionality: const { words } = require("../../json/words.json") const args = message.content.split(' ') const wordss = words.filter(m=> m.includes(args)) if(args > 1 || !wordss) { ...

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...

What is the process for activating the currently active tab or link within the MDBNav component of MDBreact?

Here is the code snippet I am working with: import React from "react"; import { BrowserRouter } from 'react-router-dom'; import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact"; const CustomTabs = props => { return ( <BrowserRouter& ...

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

Inquiries regarding node.js

While delving into research on node.js and Mongodb, I encountered a few areas that require clarification. My aim is to query Mongodb from the web using JavaScript because of my familiarity with the language. Additionally, it aligns well with Mongodb' ...

I am having trouble with searching for places using the Google API in my Node

Recently, I've been working on integrating the Google Maps API places feature into my project. Thankfully, I came across an npm module that simplifies the process of connecting it to node. Check out the npm module here! After downloading the module ...

Rearrange the order of items on mobile devices

I currently have a row in Bootstrap with two columns that stack on top of each other for larger screens. However, the order of the columns is reversed on desktop, with 'one' appearing before 'two'. Is there a simple way to rearrange the ...

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name. Although the list of options is lo ...

Showing a table row in jQuery by targeting an HTML5 attribute of a checkbox that is checked

Hey there, imagine having the following snippet of HTML: <input type-checkbox <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b6b3a6b3ffa6b7a1a6bbb6ef929fbdb6b7befc86b7a1a696a6bda1">[email protected]</a>[i].I ...