选中并取消选中,点击li

时间:2018-03-12 17:43:36

标签: javascript jquery html

单击整个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>

3 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

由于您似乎在使用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
     } 

}

答案 2 :(得分:0)

这是一个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>