Ways to conceal a div element with the help of a radio button

I'm trying to hide a whole field that is represented by a div id, but I'm having trouble getting it to work. Oddly enough, when I used a dropdown list and select option, it worked fine. Here's the code snippet:

HTML:

<div class="form-group">
    <p>
        <input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
        Show Signature
        <br><br>
        <input type="radio" class="flat" name="botsign" id="signature" value="hide" /> 
        Hide Signature
    </p>
</div> 

JS:

<script>
    $("input[name='botsign']").change(function () {
        if ($(this).val() == 'show') {
            $("#Sigbox").show();
        } else {
            $("#Sigbox").hide();
        }
    });
</script>

CSS:

    #Sigbox{
       display:none;
      }

Answer №1

Give this a shot

<div class="form-group">
    <p>
        <input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
        <input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
    </p>
</div> 


<script>
    jQuery(document).ready(function($){
        $("input[name='botsign']").click(function() {
          if ($(this).val() == 'show') {
               $("#Sigbox").show();
           } else {
               $("#Sigbox").hide();
           }
        });
    });
</script> 

Answer №2

Appreciate the assistance provided. The code I shared did function properly, however there were conflicts with other Javascripts since I had several in use. After testing the solutions suggested and finding no success, it was @AdriánDaraš's comment that prompted me to carefully review all my Javascripts. By eliminating the script responsible for styling the radio buttons, everything is now functioning as expected. Much gratitude to everyone involved.

Answer №3

Started by incorporating the jQuery CDN and creating a div box with an ID in order to test out the hide function. Then utilized jQuery() as the standard method for calling jQuery.

The change function was implemented to listen for input changes and examine the value of the input to determine whether to hide or show the box.

Below is the suggested solution:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div class="form-group">
            <p>
                <input type="radio" 
                       class="flat" 
                       name="botsign" 
                       id="signature" 
                       value="show" 
                       checked="checked"/>
                Show Signature
                <br><br>
                <input type="radio" 
                       class="flat" 
                       name="botsign" 
                       id="signature" 
                       value="hide" />
                Hide Signature
            </p>
        </div>
        <div id="Sigbox">
            hello i'm your sign box
        </div>
        <script>
            jQuery("input[name='botsign']").change(function () {
                if (jQuery(this).val() == 'show') {
                    jQuery("#Sigbox").show();
                } else {
                    jQuery("#Sigbox").hide();
                }
            });
        </script>
    </body>
</html>

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 to designing a single-row table with varying numbers of columns and ensuring alignment is in place

I currently have a table displayed https://i.sstatic.net/20gZm.png The issue arises when I input large amounts of data, causing the structure to become irregular as depicted above. My query revolves around maintaining proper alignment within the table eve ...

The method of updating a variable based on the function result when the window is resized in

I need help updating a global variable on the fly whenever the window is resized. The variable called body_size should be updated with the result of the function below it. I know that the variable is out of scope, but I'm not sure how to pass it out o ...

Switching checkboxes with jQuery

The Students Gridview includes a convenient Check All checkbox at the top that allows users to toggle all checkboxes on and off. Currently, I am trying to create a script that will toggle checkboxes in the Students Grid View. Below is my current code snipp ...

Is there a method to verify the consumability of an API without having to make a direct request to it?

I'm working on an idle timer feature where the API will be called to update data once the timer runs out. How can I check if the API is still usable without actually sending a request? ...

Understanding the percentages of CSS in relation to other elements

Can you define a CSS dimension in a percentage relative to an element other than its parent? Specifically, I want the border-radius of a div to be 10% of its width. However, using border-radius: 10% creates an elliptical border when the height and width ...

Tips for creating a nested div structure using JavaScript

I am facing an issue with my results object that includes data like Creation_date and approval_date. I have put the results in a loop in JavaScript and created nested divs. However, when I debug it, the divs are not nested as expected. Each one seems to ...

What is the best method in ASP.NET Boilerplate for retrieving JSON data?

I have been facing an issue while working on this code, constantly running into the error message: Unexpected token o in JSON at position 1 https://i.stack.imgur.com/43Ewu.png I am struggling to troubleshoot and was hoping for some advice or tips on r ...

Performing an Ajax request in Django

Currently using Django and have created a delete button function. It's working perfectly for the /employer/job/edit URL, but encountering issues with the vendor/job/edit URL. The template is shared between these two places and my code works for one bu ...

There was a potential issue with an unhandled rejection, specifically a TypeError mentioning the inability to read the property 'setState' of an undefined object

I encountered an issue while attempting to update the state using ReactJS even though I have already bound the function. The code snippet below shows that the method is bound and the console.log confirms that the API is returning the correct data. Unexpec ...

Converting the Javascript UUID function to C code

I'm in the process of converting a unique UUID creation formula from JavaScript to C. The challenge lies in finding a solution without relying on extensive crypto library dependencies that are typically associated with existing C libraries. JavaScrip ...

Is there a way for me to slice a semicircular shape out of the parent div in order to expose

Does anyone have a solution for removing a half circle div from its parent (footer) to reveal the background underneath? I've searched for canvas and jQuery solutions but haven't found anything that works. I am aiming to achieve something simil ...

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

$content = fetch_content(); var_dump($content); <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://www ...

the `req.body` method fetches an object with a property named `json

Having an issue with accessing data from req.body in my form created with JS { 'object Object': '' } //when using JSON.stringify: { '{"A":"a","B":"b","C":"c"}': &apo ...

Using Mongoose to delete a document based on the condition of a subdocument value

I'm attempting to delete a document from the "challenges" collection, but only when the user is listed as a participant with the admin role for that challenge. Although my current code logs challenge deleted, the challenge is not actually being remov ...

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

Steps to Embed a Link in a Jumbotron's Background Image

I'm facing a challenge with my jumbotron that has a background image. I want to make the image clickable so that it redirects to another page when clicked. I attempted to add an image tag with a src attribute, but it ended up overlaying another image ...

Changing an array in JavaScript within a function

When working with arrays in JavaScript, how can I mutate the value of an array inside a function? I'm aware that certain array methods can achieve this, but regular assignment doesn't seem to work. var arr = [4]; function changeArray(arr) { ...

Changing the close button icon in highslide popups

Utilizing highslide together with highcharts, I need to customize the functionality of the close button. Specifically, I want to trigger an additional function when a user clicks on the "X" button. Upon inspecting the "X" button, this is what appears in m ...

Working with jQuery: Creating multiple lightboxes using the same jQuery code

Is there a way to create a universal lightbox with the same code for all lightbox functions on the page using JQuery? $(document).ready(function() { $('.lightbox').click(function() { $('.backdrop, .box').animat ...