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

Question

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

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

Answer 1

if (isChecked) { var index = numArray.indexOf(cb);//获取numArray中项目的索引 如果(索引> -1){ numArray.splice(索引, 1);//从数组中删除项目 } document.getElementById('相关产品字段').value = numArray.join(",") }

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

jsfiddle供引用:jsfiddle demo