My Jquery CSS Checkbox is failing to register when it's checked

Question

My Jquery CSS Checkbox is failing to register when it's checked

I have implemented custom checkboxes using a custom CSS checkbox generator.

$( ".button" ).click(function() {
  if(document.getElementById('terms_checkbox').checked) {
    alert('Checkbox is checked');
  } else {
    alert('Checkbox is not checked');
  }
 });

.button{
background:red;
width:200px
height:100px;
}

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
(control script and css code here)
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
    <label class="control control-checkbox">
        First checkbox
            <input type="checkbox" />
        <div class="control_indicator"></div>
    </label>
</div>

<div class="button">
Click Me
</div>

After clicking the button, it fails to detect whether the checkbox is checked or not. What could be causing this issue?

jquery css

Answer 1

Answer №1

Don't forget to include an id for your html <input/> tag in order for the JavaScript to work properly. It should look like this:

<input type="checkbox" id='terms_checkbox'/>

Feel free to try out the code snippet below.

$(document).ready(function() {
  $(".button").click(function() {
    if (document.getElementById('terms_checkbox').checked) {
      alert('I am checked');
    } else {
      alert('I am not checked');
    }
  });
})

.button {
  background: red;
  width: 200px height:100px;
}

.control {
  font-family: arial;
  display: block;
  position: relative;
  padding-left: 42px;
  margin-bottom: 15px;
  padding-top: 3px;
  cursor: pointer;
  font-size: 16px;
}

... (CSS code continues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="control-group">
  <label class="control control-checkbox">
    First checkbox
    <input type="checkbox" id='terms_checkbox'/>
    <div class="control_indicator"></div>
  </label>
</div>

<div class="button">Click Me</div>

Make sure to wrap your JQuery code with $(document).ready to ensure that the content is fully loaded onto the DOM:

Answer 2

Don't forget to include an id for your html <input/> tag in order for the JavaScript to work properly. It should look like this:

<input type="checkbox" id='terms_checkbox'/>

Feel free to try out the code snippet below.

$(document).ready(function() {
  $(".button").click(function() {
    if (document.getElementById('terms_checkbox').checked) {
      alert('I am checked');
    } else {
      alert('I am not checked');
    }
  });
})

.button {
  background: red;
  width: 200px height:100px;
}

.control {
  font-family: arial;
  display: block;
  position: relative;
  padding-left: 42px;
  margin-bottom: 15px;
  padding-top: 3px;
  cursor: pointer;
  font-size: 16px;
}

... (CSS code continues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="control-group">
  <label class="control control-checkbox">
    First checkbox
    <input type="checkbox" id='terms_checkbox'/>
    <div class="control_indicator"></div>
  </label>
</div>

<div class="button">Click Me</div>

Make sure to wrap your JQuery code with $(document).ready to ensure that the content is fully loaded onto the DOM:

Answer 3

Answer №2

Make sure to pay attention to the details here. It seems like you forgot to select your checkbox element as there is no element with the id terms_checkbox. When using jQuery, it's recommended to utilize it for each selection instead of using plain JS/jQuery combination.

If you need to access the property checked, consider using prop(), attr(), or is().

$( ".button" ).click(function() {
  if($(".control-checkbox").find("input[type='checkbox']").prop("checked")) {
    alert('I am checked');
  } else {
    alert('I am not checked');
  }
 });

.button{
background:red;
width:200px
height:100px;
}

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
(control_indicator styling code omitted for brevity)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
    <label class="control control-checkbox">
        First checkbox
            <input type="checkbox" />
        <div class="control_indicator"></div>
    </label>
</div>

<div class="button">
Click Me
</div>

Answer 4

Make sure to pay attention to the details here. It seems like you forgot to select your checkbox element as there is no element with the id terms_checkbox. When using jQuery, it's recommended to utilize it for each selection instead of using plain JS/jQuery combination.

If you need to access the property checked, consider using prop(), attr(), or is().

$( ".button" ).click(function() {
  if($(".control-checkbox").find("input[type='checkbox']").prop("checked")) {
    alert('I am checked');
  } else {
    alert('I am not checked');
  }
 });

.button{
background:red;
width:200px
height:100px;
}

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
(control_indicator styling code omitted for brevity)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
    <label class="control control-checkbox">
        First checkbox
            <input type="checkbox" />
        <div class="control_indicator"></div>
    </label>
</div>

<div class="button">
Click Me
</div>

My Jquery CSS Checkbox is failing to register when it's checked

Answer №1

Answer №2

Similar questions

What could be preventing my HTML replacement assignment from functioning properly?

Tips on passing data in complex formats to an MVC2 controller using JQuery (Ajax)

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

The collapse component from bootstrap is not visible due to an overlapping button

Angular animation triggered when a specific condition is satisfied

saving user information with asynchronous HTTP calls

After refreshing the page, the jQuery AJAX item becomes unclickable

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

Troubleshooting the fluid container problem in Bootstrap 3

Apply a specific class to a list once scrolling beyond a certain offset of a group of division elements

Creating an element in react-draggable with two sides bound and two sides open - here's how!

Placing emphasis on a link's destination

Design an ARIA menu role with HTML and CSS code

Minimizing the menu bar while scrolling down (bootstrap3)

Div Randomly Transforms Its Vertical Position

Updates in dropdown events when options data has been modified

What is the best way to ensure all my borders are uniform in size?

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

Filtering images by their class using a drop-down menu allows for easier organization and sorting based