不选中Jquery复选框。

Question

我们正在使用Jquery，而我对它还不熟悉。我有下面的HTML和引导代码。行是动态创建的。这里我想确保一次只选中一个复选框。也就是说，应选中所选行的复选框，其余行则不应选中复选框。

<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>

我可以取消选中所有行，但不能选中所选行的复选框。

尝试使用以下Jquery代码来选中复选框，但不起作用。

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

完整代码：

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);


}

任何帮助都是非常感谢的。

Answer 1

由于发生了一个resetPaymentDisplay(this)事件，所以正在为以下元素调用onClick

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

在resetPaymentDisplay(this)函数中，它在函数参数中被称为element，但是您也在某些行中再次使用$(this)。

如果您将输入元素本身传递到函数中，因为您的HTML代码中的this引用了您的输入元素，那么您应该能够将它设置为仅由以下函数检查

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

因为您使用的是JavaScript对象，而不是jQuery对象。

对于其余的功能，即确保在任何时候只选中一个复选框--您可以使用jQuery，但也可以轻松地使用普通的JS。为了这个例子，让我们使用您试图使用的jQuery。

代码块被删除，因为它需要修复。请参阅下面的代码块。

备注：

• 区分JavaScript对象和jQuery包装对象(从jQUery搜索(如$("#something") )获得的对象)是很重要的。为了帮助您不要忘记，在jQuery包装的对象前面加上美元符号是常见的，正如您在$parent和$otherCheckboxes示例中看到的那样。

• this关键字总是指当前范围中的某些内容。这是一个很难理解的概念，尤其是当我们谈论JavaScript时。HTML中的this，JS代码中的$(this)，即使您的JS代码中有一个简单的this，都会引用不同的东西。

编辑:好的，老实说，我没有经过测试就盲目地提供了答案，并且犯了一个和你非常相似的错误。$.each函数留给您的是item中的JavaScript对象，而不是我没有意识到的jQuery对象。函数的最终代码应该如下所示

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;
        }
    });
}

下面是它的一个工作小提琴示例：https://jsfiddle.net/g5t3s4uL/

Answer 2

您可以使用下面的代码来执行以下操作：

​

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

​

Answer 3

您可以使用jquery的change事件来跟踪复选框被选中或未选中的时间，然后我们可以检查复选框是否选中，如果true，然后使用$('input:checkbox').not(this).prop('checked', false);取消选中的其他checkboxes.Also，我在下面的代码片段中删除了onclick="resetPaymentDisplay(this);。

演示代码：

​

//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>

​