Question

单击整个li时，如何检查和取消选中JavaScript中的复选框。我希望勾选复选框，然后单击然后取消选中。

function handleClick(cb) {
      if(jQuery('related-products-field')){

      document.getElementById('related-checkbox-'+cb).checked = true;
  numArray.push(cb);
      //alert(numArray);
        //var allele = document.getElementById("dialog").innerHTML = numArray;
        document.getElementById('related-products-field').value = numArray.join(",");
     } 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item odd" onclick="handleClick(338);" id="">
    <span class="input-holder"><input type="checkbox" id="related-checkbox-338" class="checkbox related-checkbox" name="related_products[]" value="338">ADD</span>
    <div class="product" id="disbaledtoclick">
       <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/image.jpg" width="100px" height="100"></a>
       <div class="product-details">
          <p class="product-name"><a href="" disabled=""> Small Teddy Bear (6")</a></p>
          <div class="price-box">
          <span class="regular-price" id="product-price-2-related">
          <span class="price" disabled="">279.0000</span></span>
       </div>

     </div>

 </div></li>

Answer 1

如果要切换复选框的选中状态，可以为其指定相反的值。

＆＃13;

function changeCheckbox(){

  let cbox = document.getElementById('cBox');
  cbox.checked = !(cbox.checked);

}

＆＃13;

<label>checkbox <input type="checkbox" id="cBox" /></label>
<button onclick="changeCheckbox();">Change Checkbox</button>

＆＃13;

Answer 2

由于您似乎在使用jQuery，因此可以执行以下操作：

 function handleClick(cb) {
      if(jQuery('related-products-field')){
        // since you are using this checkbox twice in the function, it's a good idea to define it as a variable.
        var checkbox = jQuery('#related-checkbox-'+cb);
        // The is(':checked') function checks if the checkbox is checked
        var isChecked = checkbox.is(':checked');
        // We then assign the opposite of the current state to the 'checked' attribute.
        checkbox.prop('checked', !isChecked);

        // do the rest of the function
     } 

}

Answer 3

这是一个jQuery代码，它使作业成为一行：

$(document).ready(function(){
        $('li.item.odd').on('click', function(){
            $(this).find('input[type="checkbox"]').prop("checked", !$(this).find('input[type="checkbox"]').prop("checked"));
        });
    });

复制/粘贴此完整代码以查看结果：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item odd">
    <span class="input-holder"><input type="checkbox" id="related-checkbox-338" class="checkbox related-checkbox" name="related_products[]" value="338">ADD</span>
    <div class="product" id="disbaledtoclick">
       <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/image.jpg" width="100px" height="100"></a>
       <div class="product-details">
          <p class="product-name"><a href="" disabled=""> Small Teddy Bear (6")</a></p>
          <div class="price-box">
          <span class="regular-price" id="product-price-2-related">
          <span class="price" disabled="">279.0000</span></span>
       </div>

     </div>

 </div></li>


 <script type="text/javascript">
    $(document).ready(function(){
        $('li.item.odd').on('click', function(){
            $(this).find('input[type="checkbox"]').prop("checked", !$(this).find('input[type="checkbox"]').prop("checked"));
        });
    });
 </script>

选中并取消选中，点击li

3 个答案: