Jquery checkbox is not checked

Question

We are using Jquery and I am new to it. I have the following HTML and bootstarp code. The rows are dynamically created. Here I want to insure only one checkbox is checked at a time. i.e. the checkbox should be checked for the selected row and it should be unchecked for rest of the rows.

<div id="paymentTable" class="stripeTwoRows eligibilityARPaymentInfoWidth">
   <div class="row mx-0">
      <div class="col-2 px-1">
         <input id="memberARPaymentchkbox1" type="checkbox" name="memberARPaymentchkbox" onclick="resetPaymentDisplay(this);" payment="216001221" class="cursorPtr"><b>&nbsp;&nbsp;</b>216001221
      </div>
      <div class="col-2 px-1">00001</div>
      <div class="col-2 px-1">06/30/2016</div>
      <div class="col-2 px-1"></div>
      <div class="col-2 px-1">N</div>
      <div class="col-2 px-1 d-flex justify-content-end">$350.00-</div>
   </div>
   <div class="row mx-0">
      <div class="col-2 offset-4 px-1">0063016</div>
      <div class="col-2 offset-4 px-1 d-flex justify-content-end">$0.00</div>
   </div>
   <div class="row mx-0">
      <div class="col-2 px-1">
         <input id="memberARPaymentchkbox2" type="checkbox" name="memberARPaymentchkbox" onclick="resetPaymentDisplay(this);" payment="216001222" class="cursorPtr"><b>&nbsp;&nbsp;</b>216001222
      </div>
      <div class="col-2 px-1">00001</div>
      <div class="col-2 px-1">06/30/2016</div>
      <div class="col-2 px-1"></div>
      <div class="col-2 px-1">N</div>
      <div class="col-2 px-1 d-flex justify-content-end">$400.00-</div>
   </div>
   <div class="row mx-0">
      <div class="col-2 offset-4 px-1">0063016</div>
      <div class="col-2 offset-4 px-1 d-flex justify-content-end">$0.00</div>
   </div>
</div>

I could able to uncheck all the rows, bu not able to check the checkbox of the selected row.

Tried with following Jquery code to check the checkbox, but not working.

$(this).find("input[type=checkbox]").attr("checked", true);

full code:

function resetPaymentDisplay(element) {
    var iCount = paymentTable.children.length;
    for (var iLoop = 0; iLoop < iCount; iLoop += 2) {

        paymentTable.children[iLoop].children[0].children[0].checked = false;


    }
     $(this).find("input[type=checkbox]").attr("checked", true);
    //$(this).attr("checked", true);


//  $(element).children().eq(0).prop('checked', true);
//  $(this).find("input[type=checkbox]").attr("checked", true);


}

Any help is appreciated.

Answer 1

You are calling resetPaymentDisplay(this) for the following element because of an onClick event

<input id="memberARPaymentchkbox2" type="checkbox" name="memberARPaymentchkbox" onclick="resetPaymentDisplay(this);" payment="216001222" class="cursorPtr">

In the resetPaymentDisplay(this) function it is referred to as element in the function arguments yet you are also using $(this) again on some lines.

If you pass the input element itself into the function, as you do because the this in your HTML code references your input element, you should be able to set it to checked just by the following function

function resetPaymentDisplay(element) {
    element.checked = true;
}

because you are working with a JavaScript object, not a jQuery object.

For the rest of the functionality, which is ensuring that you only have one of the checkboxes checked at any time you could use jQuery, but it can be easily done with vanilla JS as well. For the sake of this example let's go with jQuery that you were trying to use.

Code block removed because it needed fixing. Please refer to the code block below.

Notes:

• it is important to differentiate between JavaScript objects and jQuery wrapped objects (the ones you get from jQUery searches like $("#something"). To help you not forget which is which it's common to prefix the jQuery wrapped objects with a dollar sign as you can see in the $parent and $otherCheckboxes example.

• this keyword always refers to something in the current scope.. it is a rather tricky concept to understand, especially if we're talking about JavaScript. The this in your HTML, $(this) in your JS code and even if you had a simple this in your JS code all reference different things.

Edit: Ok, to be honest I've provided the answer blindly without testing and made a very similar mistake as you did. The $.each function leaves you with JavaScript objects in item, instead of jQuery ones which I didn't realize. The final code for the function should look like this

function resetPaymentDisplay(element) {
    element.checked = true;

    var $parent = $('#paymentTable');
    var $otherCheckboxes = $parent.find(".cursorPtr");
    $otherCheckboxes.each(function(i, item) {
        if (item.id !== element.id) {
            item.checked = false;
        }
    });
}

Here is a working fiddle example for it: https://jsfiddle.net/g5t3s4uL/

Answer 2

You can use the code below to perform that:

$('#paymentTable input[type=checkbox]').change(function() {
  $('#paymentTable input[type=checkbox]').prop("checked", false);
  $(this).prop("checked", true);
});

Answer 3

You can use change event of jquery to keep track when your checkbox is checked or unchecked and then we can check if the checkbox is checked if true then use $('input:checkbox').not(this).prop('checked', false); to unchecked other checkboxes.Also i have removed onclick="resetPaymentDisplay(this); in below code snippet .

Demo Code :

//on change of checkbox
$(document).on("change","input[type=checkbox]" ,function() {
//chcking if checkbox is checked
  if ($(this).prop("checked") == true) {
  //unchecked others
    $('input:checkbox').not(this).prop('checked', false);
    console.log("uncheck others")
   
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentTable" class="stripeTwoRows eligibilityARPaymentInfoWidth">
  <div class="row mx-0">
    <div class="col-2 px-1">
      <input id="memberARPaymentchkbox1" type="checkbox" name="memberARPaymentchkbox" payment="216001221" class="cursorPtr"><b>&nbsp;&nbsp;</b>216001221
    </div>
    <div class="col-2 px-1">00001</div>
    <div class="col-2 px-1">06/30/2016</div>
    <div class="col-2 px-1"></div>
    <div class="col-2 px-1">N</div>
    <div class="col-2 px-1 d-flex justify-content-end">$350.00-</div>
  </div>
  <div class="row mx-0">
    <div class="col-2 offset-4 px-1">0063016</div>
    <div class="col-2 offset-4 px-1 d-flex justify-content-end">$0.00</div>
  </div>
  <div class="row mx-0">
    <div class="col-2 px-1">
      <input id="memberARPaymentchkbox2" type="checkbox" name="memberARPaymentchkbox" payment="216001222" class="cursorPtr"><b>&nbsp;&nbsp;</b>216001222
    </div>
    <div class="col-2 px-1">00001</div>
    <div class="col-2 px-1">06/30/2016</div>
    <div class="col-2 px-1"></div>
    <div class="col-2 px-1">N</div>
    <div class="col-2 px-1 d-flex justify-content-end">$400.00-</div>
  </div>
  <div class="row mx-0">
    <div class="col-2 offset-4 px-1">0063016</div>
    <div class="col-2 offset-4 px-1 d-flex justify-content-end">$0.00</div>
  </div>
</div>

Answer 4

Try:

$(this).find("input[type=checkbox]").prop("checked", true);