添加单击后,使用jquery从输入中删除值

时间:2018-03-13 05:09:39

标签: javascript jquery

我想在输入类型中删除onclcik之后存储的值。现在我想删除值onclick。如果取消选中添加值的框,我使用复选框添加条件值。现在我想在检查条件下从输入onclick中删除匹配的值,如果是。

HTML

<ul class="Popular" id="Popular">
   <li class="item odd" onclick="handleClick(334);" id="">
      <span class="input-holder"><input type="checkbox" id="related-checkbox-334" class="checkbox related-checkbox" name="related_products[]" value="334">ADD</span>
      <div class="product" id="disbaledtoclick">
         <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/g/r/greeting.jpg" width="100px" height="100"></a>
         <div class="product-details">
            <p class="product-name"><a href="" disabled=""> 10 Handmade chocolates</a></p>
            <div class="price-box">
               <span class="regular-price" id="product-price-2-related">
               <span class="price" disabled="">249.0000</span></span>
            </div>
         </div>
      </div>
   </li>
   <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/media/catalog/product/w/h/white-teddy-6inch-addon.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>
   <li class="item odd" onclick="handleClick(339);" id="">
      <span class="input-holder"><input type="checkbox" id="related-checkbox-339" class="checkbox related-checkbox" name="related_products[]" value="339">ADD</span>
      <div class="product" id="disbaledtoclick">
         <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/5/-/5-dairy-milk.jpg" width="100px" height="100"></a>
         <div class="product-details">
            <p class="product-name"><a href="" disabled=""> 5 Dairy milk 13 gms each</a></p>
            <div class="price-box">
               <span class="regular-price" id="product-price-2-related">
               <span class="price" disabled="">200.0000</span></span>
            </div>
         </div>
      </div>
   </li>
   <li class="item odd" onclick="handleClick(340);" id="">
      <span class="input-holder"><input type="checkbox" id="related-checkbox-340" class="checkbox related-checkbox" name="related_products[]" value="340">ADD</span>
      <div class="product" id="disbaledtoclick">
         <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/h/a/half-kg-kajukatli.jpg" width="100px" height="100"></a>
         <div class="product-details">
            <p class="product-name"><a href="" disabled=""> Half kg Kaju Katli</a></p>
            <div class="price-box">
               <span class="regular-price" id="product-price-2-related">
               <span class="price" disabled="">200.0000</span></span>
            </div>
         </div>
      </div>
   </li>
   <li class="item odd" onclick="handleClick(341);" id="">
      <span class="input-holder"><input type="checkbox" id="related-checkbox-341" class="checkbox related-checkbox" name="related_products[]" value="341">ADD</span>
      <div class="product" id="disbaledtoclick">
         <a disabled="" href="" title="" class="product-image"><img src="https://www.example.com/media/catalog/product/a/d/ad007_large_teddy_bear_gift_to_india.jpg" width="100px" height="100"></a>
         <div class="product-details">
            <p class="product-name"><a href="" disabled=""> Large Teddy Bear (12")</a></p>
            <div class="price-box">
               <span class="regular-price" id="product-price-2-related">
               <span class="price" disabled="">200.0000</span></span>
            </div>
         </div>
      </div>
   </li>
</ul>

的Javascript

var numArray = [];

function handleClick(cb) {

    if (jQuery('related-products-field')) {

        if (jQuery('related-products-field')) {

            var checkbox = jQuery('#related-checkbox-' + cb);
            // The is(':checked') function checks if the checkbox is checked
            var isChecked = checkbox.is(':checked');
            if (isChecked) {

                I want remove code here
            }
        }
        if (!isChecked) {

            numArray.push(cb);
            //alert(numArray);
            //var allele = document.getElementById("dialog").innerHTML = numArray;
            document.getElementById('related-products-field').value = numArray.join(",");

        }

        //alert("xcccc");

        checkbox.prop('checked', !isChecked);


        // do the rest of the function
    }

}
// }
}

值保存在点击

的输入中
 <input type="hidden" name="related_product" id="related-products-field" value="338,339,340">

1 个答案:

答案 0 :(得分:0)

if (isChecked) { var index = numArray.indexOf(cb); //to get index of your item in numArray if (index > -1) { numArray.splice(index, 1); //removes item from array } document.getElementById('related-products-field').value = numArray.join(",") }

javascript有splice()函数从数组中删除项目。

jsfiddle供参考:jsfiddle demo