Change the border color of radio buttons when clicked

When one of the radio buttons is clicked, it should give an outer border with color. When the other radio button is clicked, it should give an inner border that surrounds the image.


   <!DOCTYPE html>
   <html>
      <head>
                 <script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">          </script>
      <style>
        .container1{
           float:left;
           width:33%;
           height:456px;
           display:inline-block;
        }
        #h{
           color:black;
           font-style:none;
        }
        .grid{
           padding:10px;
           width:93%;
           border:1px solid white;
           height:310px;
        }
        img{
           margin:5px;
        }
        .right1{
           padding-left:80px;
           display:inline-block;
           width:20%;
           height:300px;
           border:1px solid black;
        }
        #tele1{
           border:1px solid white;
        }
        #tele2{
           border:1px solid white;
        }
        #tele3{
           border:1px solid white;
        }
        #tele4{
           border:1px solid white;
        }
        #button1{
           width:100px;
           margin-top:40px;
        }
        #button2{
           width:100px;
           margin-top:20px;
        }
        .right2{
           float:right;
           width:30%;
           height:300px;
        }
     </style>
     <script>
     $(document).ready(function(){
        $("#kar1").click(function(){
           var thik=$("#kar1").attr('src');
           $("#tele1").attr('src',thik)
           $("#tele1").fadeToggle();

        });
        $("#kar2").click(function(){
           var thik1=$("#kar2").attr('src');
           $("#tele2").attr('src',thik1)
           $("#tele2").fadeToggle();
        });

        $("#kar3").click(function(){
           var thik2=$("#kar3").attr('src');
           $("#tele3").attr('src',thik2)
           $("#tele3").fadeToggle();

        });
        $("#kar4").click(function(){
           var thik3=$("#kar4").attr('src');
           $("#tele4").attr('src',thik3)
           $("#tele4").fadeToggle();
        });

        $("#list").change(function(){
           var selectedValue=$(this).val();
           $("#h").css("color",selectedValue);
        });
        $("#fonts").change(function(){
           var selecteValue=$(this).val();
           $("#h").css("font-size",selecteValue);
        });
        $('input[type="radio"]').click(function(){
           $("#h").css("font-style",$(this).val());
        });
        $("#img1").click(function(){
           $("#button1").click(function(){
              var lk=$(this).val();
              $(".grid").css("border-Color",lk);
           });
           $("#button2").click(function(){
              var k=$(this).val();
              $(".grid").css("border-Color",k);
           });
        });

        $("#grid1").click(function(){
           $("#button1").click(function(){
           var llk=$(this).val();
           $("img").css("border-Color",llk);
        });
        $("#button2").click(function(){
           var kl=$(this).val();
           $("img").css("border-Color",kl);
        });
     });
     });


     </script>
    </head>
    <body>
    <h3 id="h" >Album tittle</h3>
      <div class="container1">
     <div class="grid">
        <img id="tele1" src="original.jpg"width="45%"height="120px">
        <img id="tele2" src="original.jpg"width="45%"height="120px"> 
        <img id="tele3" src="original.jpg"width="45%"height="120px"> 
        <img id="tele4" src="original.jpg"width="45%"height="120px"> 
        </div>
       <div class="addimg">
        <img id="kar1" src="bike.jpg"width="20.2%"height="100px" >
        <img id="kar2" src="purple-curves-circles-   271580.jpg"width="22.4%"height="100px">
        <img id="kar3" src="fail.jpg"width="22.2%"height="100px">
        <img id="kar4" src="download.jpg"width="22.4%"height="100px">
        </div>
         </div>
        <div class="right1">
         <form id="my form">
        <input id="img1"  type="radio" name="bcolor"value="U">image 
        <input id="grid1" type="radio"   name="bcolor"value="B">grid
       </form>
       <br>
       <button id="button1" value="red"> red</button><br>
        <button id="button2" value="yellow" >yellow</button>
     <div class="right2">
     <P>
        Color  :
        <select id="list">
           <option value="red">red</option>
           <option value="blue">blue</option>
           <option value="#ff00ff">pink</option>
           <option value="#ff9900">orange</option>
           <option value="#0088cc">light blue</option>
        </select>
          </p>
        font-size: 
           <select id="fonts">
        <option value="1px">1
        <option>
        <option value="10px">10
        <option>
        <option value="20px">20
        <option>
        <option value="30px">30
        <option>
        <option value="40px">40
        <option>
        <option value="50px">50
        <option>
        <option value="60px">60
        <option>
     </select>
     <br><br>
     <input id="family1" type="radio"  name="k" value="italic">I
     <input  id="family1" type="radio"   name="k" value="normal">N
     <input  id="family1"type="radio"  name="k" value="Courier New">I
     </div>
      </body>
       </html>

Unfortunately, my code is not functioning properly as clicking the second radio button also changes the color of the outer border instead of changing only the color of the inner border.

Answer №1

Are you saying that when radio buttons with the IDs #img1 & #grid1 are clicked, they change the color of a div with the class .right1?

Your explanation is a bit unclear. Can you provide more details?

P.S: It's not possible for multiple radio buttons to have the same ID. Each element must have a unique ID. You should consider using the name attribute with a common value for radio buttons rather than the id. You could also use the class attribute instead of the id.

Observations from the Code: If your intention is to change the colors of elements using the #img1 and #grid1 identifiers as follows:

$("#img1").click(function(){
       $("#button1").click(function(){
          var lk=$(this).val();
          $(".grid").css("border-Color",lk);
       });
       $("#button2").click(function(){
          var k=$(this).val();
          $(".grid").css("border-Color",k);
       });
    });

    $("#grid1").click(function(){
       $("#button1").click(function(){
       var llk=$(this).val();
       $("img").css("border-Color",llk);
    });
    $("#button2").click(function(){
       var kl=$(this).val();
       $("img").css("border-Color",kl);
    });
 });

then this code will not work as intended. Placing a

$("#<button>").click(function(){...})
inside another element's click event will not automatically trigger a click event handler. You need to use
$("#<button>").trigger("click");
instead.

Please make the suggested changes in your code and test it again. Everything else looks good :-)

I hope this clarifies things for you. Thank you.

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

Guide on automatically populating login data in an html5 form using a python script

I'm currently attempting to create a script that can automatically populate the values of an HTML5 form (specifically Name and Password fields). However, I am struggling with how to actually input these values. After searching various sites, I have y ...

How to Use Jquery to Deactivate a Div with a Background Color

Currently, I have a div that contains several child divs. My goal is to disable the parent div and all of its children, showing them in gray color. I initially tried using the CSS property opacity, but unfortunately, the background color didn't change ...

If there are no spaces, text will be removed from my list group

While working on developing a forum, I encountered an issue where if I repeatedly input letters or words without any spaces, it causes everything to overlap. Below is an example highlighting this problem: https://i.sstatic.net/KStNq.png Although there is ...

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...

How can I limit the jQuery date picker to only choose the month and year?

Is it possible to use the jQuery date picker to select only month and year? I attempted to do so by using the date format option, but it still shows dates as well. I am looking for a way to exclusively choose the month and year. ...

Changing CSS image properties: A step-by-step guide

I've come across a strange conflict between Twitter Bootstrap (2.2.1) and Ad-Gallery in Internet Explorer. It seems that certain lines in bootstrap.min.css are causing issues, preventing images from displaying: img{max-width:100%;width:auto\9;h ...

Utilizing the Bootstrap grid system for responsiveness is optimized for a first word that is precisely 15 characters

Trying to achieve responsiveness using basic Bootstrap. The layout becomes responsive only when the initial word in a sentence contains more than 15 characters, as illustrated below. https://i.stack.imgur.com/wyErA.png <!-- Headers --> <div clas ...

Problem encountered when attempting to use 'delete' as a property name

I am currently encountering an issue with a form that deletes a gallery from a database. Previously, the code was functioning properly but after some recent updates such as switching from jquery.interface to jquery-ui, I am now facing difficulties. Wheneve ...

How can I incorporate Bootstrap multi-select into the jQuery DataTables DOM?

Having trouble implementing a bootstrap multi-select inside a jQuery datatable DOM. I followed this example to add a custom element within the jQuery datatable container. It works fine for normal bootstrap select, but when trying to add a bootstrap multi-s ...

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

How to launch a URL in a list by pressing the Enter key with jQuery?

I am currently working on a jQuery "auto-suggest" search box feature. It displays search results in a list of Href's, allowing users to click on an item to navigate to the relevant page. Users can also use arrow keys to scroll through the list and mak ...

What could be causing my textarea-filling function to only be successful on the initial attempt?

Programming: function updateText() { $("body").on("click", ".update_text", function(event) { $(this).closest("form").find("textarea").text("updated text"); event.preventDefault(); }); } $(document).ready(function() { updateText(); }); H ...

Combining Isotope with VueJS for Powerful Frontend Development

Vue has quickly become my favorite tool since I started using it about a month ago. However, I'm currently facing some challenges while trying to integrate it with isotope.js, an impressive filtering/sorting/layout library. The issue arises because i ...

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

Understanding the reasoning behind the back button

I am currently working on a project that requires implementing a back button functionality. Unfortunately, I am facing some challenges with it. While I have successfully created a back button that works, the issue arises when the user wants to edit the pre ...

Sending a model from a View to a boolean method using AJAX in ASP.NET MVC

I am looking to pass a model from BeginForm to a boolean method in the Controller. If the boolean method returns TRUE, I want to refresh a partial view using AJAX. Otherwise, if it returns FALSE, I want to display a pop-up with information from the method ...

Determine in jQuery whether a Value is present within a JSON dataset

[ { "link" : "images/examples/image-3.png", "image" : "images/examples/image-3.png", "title" : "copy" }, { "link" : "images/examples/image-3.png", "video" : "video placeholder", "title" : "c ...

Cut off a string from the start

I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...