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

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

Pointer-events property in pseudo elements not functioning as expected in Firefox browser

The dropdown feature in Materialize does not function properly when used within a dynamically generated card

Error occurred during download or resource does not meet image format requirements

- The click function is failing to work after an ajax call [Potential event delegation problem]

Leveraging AJAX and jQuery for data storage

Objective subject for an element within a :not operation

detecting syntax errors in CSS with @media queries and keyframes

What steps can I take to guarantee that both images and text adapt well to different screen sizes?

What is the best way to obtain a link within a function() { ...}?

Collapse all "Read More" buttons simultaneously using Bootstrap

Press and hold feature using CSS or JavaScript

Modify the database once authorized by the administrator

Interactive calendar feature with a popup that appears when hovering over an event

I am struggling to make my table adapt to different screen sizes and become

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

Is it feasible to implement a jQuery dialog with an ASP.NET user control?

Difficulties encountered with CSS transitions when using the background

Set the position to fixed so it doesn't scroll