Clicking the jAuery selection button on the website allows

I have a table with buttons that I need to customize for selection, using CSS.

The goal is to style the buttons differently than standard checkboxes or radio buttons by using the type "button" and applying CSS/CSS3 styles.

<div class="button">
    <table>
        <tr>
            <td>
                // Code for 1-10 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 11-20 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 21-30 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 31-40 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 41-50 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 51-60 buttons
            </td>
        </tr>
        <tr>
            <td>
                // Code for 61-70 buttons
            </td>
        </tr>
    </table>
</div>

For a live example and further reference, check out this JSFiddle link. (Note: only one button can be selected at a time in the current setup)

javascriptjqueryhtmlcss

Answer №1

To interact with user inputs, utilize JavaScript instead of CSS.

By using jQuery, you can apply the "focus" class.

$(".button input[type=button]").click(function () {
  $(this).toggleClass("focus"); 
});

$("#HS").click(function () { // Insert a new input
  var array = []
  $(".button input[type=button].focus").each(function () {
    array.push($(this).val());
  });
  console.log(array.join(", "));
});

Check it out: http://jsfiddle.net/Dp8tR/

Past approach :

$("input[type=button]").click(function () {
  $(this).toggleClass("focus"); 
});

View here: http://jsfiddle.net/TTL8d/

Answer №2

Enhance the appearance of checkboxes by customizing their style to resemble buttons. Additionally, add styling for the :checked state.

Answer №3

Give the "markable" class to all buttons in your code so they can be easily identified and styled using CSS and jQuery.

$( ".markable" ).click(function() {
  $( this ).toggleClass( "active-now" );
});

CSS:

.active-now {
  border-color: black;
  border-style: solid;
  background: yellow;
}

You can target all elements with the "active-now" class for further styling or interaction.

See a live demo here: http://example.com/demo

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

Passing multiple variables using Ajax: Utilizing Javascript objects

I am currently using ajax and php to load files, but I am facing difficulties in adding other variables in the ajax function along with the file. Here is an example of the HTML code: <html> <body> Select image to upload: ...

javascriptphpjqueryajax

What options exist for the format field in a font-face src declaration?

How can I determine when and how to use different font formats, and are they always necessary? Various websites provide examples like the ones below, with different arrangements: @font-face { font-family: 'Example'; src: url('Example.eo ...

cssfontsformatfont-face

Showing objects based on the proportions of the container

I am currently working on a component that will be utilized in numerous widgets within our web application. Is there any method to adjust the visibility of elements based on the size of a div? <div class="container" style="width:100%"> <div> ...

cssangularjshtmldom

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js

Creating chained fetch API calls with dependencies in Next.js

I am a novice who is delving into the world of API calls. My goal is to utilize a bible api to retrieve all books, followed by making another call to the same api with a specific book number in order to fetch all chapters for that particular book. After ...

javascriptreactjsnext.jsfetch-api

What is the best way to invoke my Python function within my JavaScript file?

I am facing an issue with using my Python function in JavaScript. Although the actual code I am working on is more complex, I have simplified it to demonstrate the problem below: main.mjs dbutils.notebook.run("./aPythonFile.py", 5, {"parame ...

javascriptpythondbutils

Creating three boxes within a single div using standard HTML and CSS

I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS. https://i.stack.imgur.com/dwNZi.png The numbers represent the box numbers in the design. Here is my attempt at coding this: HTML file <!DOCTYPE html& ...

htmlcss

Prevent the crawling of HTML segments by utilizing HTML-XSL parsing techniques

I am currently working with Watson Explorer FC 11.0.2 and I am facing a challenge in excluding certain HTML tags from the Watson crawlers. I am using an XSLT parser to extract metadata, title, and body from an HTML page located at the following path: "/h ...

htmlxmlxsltibm-watsonwatson-explorer

Guide to switching from test mode to live mode and enabling live mode in stripe with nodejs

I have encountered an issue with the stripe form I am currently using for payments. When the form is loading, it displays "test mode" in the top right corner. I am unsure how to switch it to live mode and cannot find any option on the stripe dashboard to d ...

javascriptnode.jstestingstripe-payments

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

csscss-selectors

Utilizing jQuery for toggling the visibility of a menu

I have created a code for a navigation page that I am currently developing for use on the Tumblr platform. The navigation setup involves using #navstart as the category of the navigation items and #navitem for individual items. Below is an example of how I ...

jquerytoggleclass

What's the best way to integrate Firebase authentication with local state using hooks?

I was following the tutorial on implementing authentication in my React app using functional components and hooks. How can I replace the componentDidMount() and componentWillUnmount() lifecycle methods? Below is the code snippet from my Login.jsx componen ...

javascriptreactjsfirebasefirebase-authentication

Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

How can I adjust the color of the entire table (every row of the table)? Currently, I can only change the color of the first row of my table. Here is my color function in JSP: function changeColor(rowID){ var row = document.getElementById(rowID); ...

javajavascriptajaxjsp

Fade out a GLTF model in an A-frame after a short period of time

I'm trying to figure out how I can make my gltf model fade out after approximately 3 seconds using A-frame (https://aframe.io). I'm not sure about the best approach for this. Here is a snippet of my current code: <script> AFRAME.registerCom ...

javascriptjquerythree.jsaframewebvr

Footer not sticking to the bottom of the page with Material UI

View Page Screenshot My challenge is with the Footer using AppBar when there is no content. It doesn't properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach ...

htmlcssreactjsmaterial-ui

Encountering a parse error when making an AJAX call using structural functions

I'm in the process of developing an API and here is my PHP function. function retrieve_schools($cn){ $schools_query = "SELECT * FROM schools"; $school_result = mysqli_query($cn, $schools_query); $response_array['form_data'][&apo ...

javascriptphpjqueryajax

css optimizing image content for search engine visibility

My website's main page features a div with an image containing the message "contact us by calling 1 800 blabla..". I'm concerned that search engines may not be able to recognize or find my company's phone number since it is only displayed wi ...

cssimagehtmlsearch-engineinformation-retrieval

Increased wait time during initial execution

Currently facing an issue with delaying the first run of a function. I've developed a basic slideshow that is causing problems due to this delay in the initial run. My goal is to have the first run wait for 10 seconds and then maintain a 4-second del ...

javascriptjqueryhtmlcss

Encountering difficulties loading .mtl and .obj files using react-three-renderer

I'm currently utilizing react-three-renderer to load .obj and .mtl files, but I'm encountering difficulties in rendering the model. Instead, a cube is being rendered inside the div. My goal is to replace the cube with my desired .obj model. Inst ...

javascriptreactjsthree.jsobjloader

Filtering JSON data with JavaScript

Looking to group data in AngularJS using UnderscoreJS. Here is the JSON data: data = [ { "Building*": "Building A", "Wing*": "Wing C", "Floor*": "Floor 3", "Room Name*": "Room 3", "Room Type*": ...

javascriptjson