Having trouble making radio buttons clickable with jQuery/JS?

Question

Having trouble making radio buttons clickable with jQuery/JS?

Having a minor issue as a beginner, I am struggling to make buttons within a DIV clickable.

The top line consists of 5 buttons that work perfectly. When clicked, a 2nd row appears as expected, but for some reason, I can't click on them. What could be causing this?

To see the code and the issue in action, check out this link: https://jsfiddle.net/yello/1me8naee/

Here is the code snippet:

       $(document).ready(function() {
                $('#div1,#div2,#div3').hide();
                $('#mod-7').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                // Other button click functions...
              });

.segmented {
  padding: 12px;
}
// CSS Styles...
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="segmented">
  <input type="radio" name="mod-1" value="Organisation" id="mod-7">
  <label for="mod-7">iPhone 7</label>
  // Other input and label elements...
</nav>

javascript jquery css radio-button

Answer 1

Answer №1

Your code is performing well as expected. Simply incorporate unique identifiers to the labels.

For example:

   <div id="div1">
      <input type="radio" name="mem" id="32" value="32">
      <label for="32">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="128">128Gb</label>
      <input type="radio" name="mem" id="256" value="256">
      <label for="256">256Gb</label>
    </div>

https://jsfiddle.net/1me8naee/12/

Furthermore, ensure that the IDs are specific to each model to prevent conflicts like having "32 iPhone 6" and "32 iPhone 7."

Answer 2

Your code is performing well as expected. Simply incorporate unique identifiers to the labels.

For example:

   <div id="div1">
      <input type="radio" name="mem" id="32" value="32">
      <label for="32">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="128">128Gb</label>
      <input type="radio" name="mem" id="256" value="256">
      <label for="256">256Gb</label>
    </div>

https://jsfiddle.net/1me8naee/12/

Furthermore, ensure that the IDs are specific to each model to prevent conflicts like having "32 iPhone 6" and "32 iPhone 7."

Answer 3

Answer №2

Review to ensure that the ID of the radio button is included in the code snippet `for="mem3-64"` as demonstrated below.

       $(document).ready(function() {
                $('#div1,#div2,#div3').hide();
                $('#mod-7').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-7p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6s').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').show('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-se').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').hide('fast');
                  $('#div3').show('fast');
                });
              });

.segmented {
  padding: 12px;
}

.segmented input[type=radio] {
  display: none;
}

.segmented label {
  border: outset 1px silver;
  padding: 2px 16px;
  margin-right: -5px;
  background: #ddd;
  cursor: pointer;
}

.segmented input:checked + label {
  border: inset 1px silver;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</script>
...
    </div>
    <div id="div3">
      <input type="radio" name="mem" id="mem3-32" value="32">
      <label for="mem3-32">32Gb</label>
      <input type="radio" name="mem" id="mem3-64" value="64">
      <label for="mem3-64">64Gb</label>
    </div>

  </div>

</nav>

Answer 4

Review to ensure that the ID of the radio button is included in the code snippet `for="mem3-64"` as demonstrated below.

       $(document).ready(function() {
                $('#div1,#div2,#div3').hide();
                $('#mod-7').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-7p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6s').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').show('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-6p').click(function() {
                  $('#div1').show('fast');
                  $('#div2').hide('fast');
                  $('#div3').hide('fast');
                });
                $('#mod-se').click(function() {
                  $('#div1').hide('fast');
                  $('#div2').hide('fast');
                  $('#div3').show('fast');
                });
              });

.segmented {
  padding: 12px;
}

.segmented input[type=radio] {
  display: none;
}

.segmented label {
  border: outset 1px silver;
  padding: 2px 16px;
  margin-right: -5px;
  background: #ddd;
  cursor: pointer;
}

.segmented input:checked + label {
  border: inset 1px silver;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</script>
...
    </div>
    <div id="div3">
      <input type="radio" name="mem" id="mem3-32" value="32">
      <label for="mem3-32">32Gb</label>
      <input type="radio" name="mem" id="mem3-64" value="64">
      <label for="mem3-64">64Gb</label>
    </div>

  </div>

</nav>

Having trouble making radio buttons clickable with jQuery/JS?

Answer №1

Answer №2

Similar questions

What is causing the button on the update div to not respond when clicked after receiving a Jquery ajax response?

Tips for automatically loading a new page or URL when a user scrolls to the bottom

Verify the Javascript for file upload in ASP.NET folder prior to uploading it

A Promise is returned when making multiple axios get requests in Node.js

Tips for altering the currently active tab in a separate window using a browser extension?

How can we effectively map Typescript Enums using their keys without relying on a Map?

Loading images in advance with AJAX for enhanced AJAX performance

Using React and TypeScript to enable file uploads

PHP, having difficulty assigning value to variable using $_POST

Translating Django into JavaScript files

Bizarre String Behavior in jQuery JSON Through Ajax Request

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

In order to manage this specific file type, you may require a suitable loader. React in conjunction with Material UI could be the

Transmitting data from Javascript to Django views

CSS - Overlapping elements on smaller screens due to being stacked

trouble encountered when attempting to integrate typeahead functionality in AngularJS using jQuery

What is the best way to execute methods once subscription data is received?

Adding the output from a promise to an array

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

Creating links within a single image in HTML?