Question 37223 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to get the value of the selected checkbox in jQuery

I have a filter function whereby a user can check one or multiple amenities and get the values which will be sent to the database using AJAX.

In this case upon clicking one checkbox I also want to get the values of the other checkboxes if they are checked.

On clicking the #balcony input I will get the value of the balcony, also when I click the #wifi checkbox I want to get the ‘yes’ value

How can I achieve this? I have tried the following logic but it doesn’t work.

$("#balcony").on('click', function() {
  var balcony = $(this).val();
  var wifi = $("#wifi").prop('checked');
  var parking = $("#parking").prop('checked');
  var generator = $("#generator").prop('checked');

  console.log(wifi);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="card-body">
  <div class="card-title" style="margin:0px; padding:3px;">
    <h5 style="color: black; font-size:18px;">Amenities</h5>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterbalcony" value="yes" id="balcony">
    <label for="rentalcat" class="control-label">Balcony</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filtergenerator" value="yes" id="generator">
    <label for="rentalcat" class="control-label">Generator</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterwifi" value="yes" id="wifi">
    <label for="rentalcat" class="control-label">Wifi</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterparking" value="yes" id="parking">
    <label for="rentalcat" class="control-label">Parking</label>
  </div>
</div>
Tags:

2

Answers


  1. 0

    You are only checking if the checkbox is checked or not, you can either use

    var wifi = $("#wifi").prop('checked') ? 'yes' : 'no';

    or

    var wifi = $("#wifi:checked").val();

    Beware that this will return undefined if wifi is not checked

    $("#balcony").on('click', function() {
  var balcony = $(this).val();
  var wifi = $("#wifi").prop('checked') ? 'yes' : 'no';
  var wifi2 = $("#wifi:checked").val();
  var parking = $("#parking").prop('checked') ? 'yes' : 'no';
  var generator = $("#generator").prop('checked') ? 'yes' : 'no';

  console.log(wifi);
  console.log(wifi2);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <div class="card-title" style="margin:0px; padding:3px;">
    <h5 style="color: black; font-size:18px;">Amenities</h5>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterbalcony" value="yes" id="balcony">
    <label for="rentalcat" class="control-label">Balcony</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filtergenerator" value="yes" id="generator">
    <label for="rentalcat" class="control-label">Generator</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterwifi" value="yes" id="wifi">
    <label for="rentalcat" class="control-label">Wifi</label>
  </div>
  <div class="checkbox checkbox-success">
    <input type="checkbox" name="filterparking" value="yes" id="parking">
    <label for="rentalcat" class="control-label">Parking</label>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can try below snippet. I have added class to input boxes and just modified event to change

    $(".filterCheckbox").on('change', function() {
    var balcony = $("#balcony").prop('checked') ? 'yes' : 'no';
    var generator = $("#generator").prop('checked') ? 'yes' : 'no';
    var wifi = $("#wifi").prop('checked') ? 'yes' : 'no';
    var parking = $("#parking").prop('checked') ? 'yes' : 'no';

    console.log('balcony => ' + balcony + ', generator => ' + generator +', wifi => ' + wifi + ', parking => ' + parking);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
    <div class="card-title" style="margin:0px; padding:3px;">
        <h5 style="color: black; font-size:18px;">Amenities</h5>
    </div>
    <div class="checkbox checkbox-success">
        <input type="checkbox" name="filterbalcony" value="yes" class="filterCheckbox" id="balcony">
        <label for="rentalcat" class="control-label">Balcony</label>
    </div>
    <div class="checkbox checkbox-success">
        <input type="checkbox" name="filtergenerator" value="yes" class="filterCheckbox" id="generator">
        <label for="rentalcat" class="control-label">Generator</label>
    </div>
    <div class="checkbox checkbox-success">
        <input type="checkbox" name="filterwifi" value="yes" class="filterCheckbox" id="wifi">
        <label for="rentalcat" class="control-label">Wifi</label>
    </div>
    <div class="checkbox checkbox-success">
        <input type="checkbox" name="filterparking" value="yes" class="filterCheckbox" id="parking">
        <label for="rentalcat" class="control-label">Parking</label>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search