इस स्क्रिप्ट को बदलने का एक तरीका खोज रहे हैं ताकि मैं इसे प्रत्येक के लिए एक अलग फ़ंक्शन को सही किए बिना एकाधिक चेकबॉक्स/इनपुट पर उपयोग कर सकूं।

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="child_div_1">MULTI SWITCH
<hr>
<div>
<input type="checkbox" class="apple-switch reveal" id="swm_box">
<span class="qntylabel">SWM 30</span>
<div class="part">
<input type="text" name="swm" id="swm" class="qnty" placeholder="QTY" pattern="\d*" value="test1"/>
</div>
</div>

<div>
<input type="checkbox" class="apple-switch reveal" id="rc66_box">
<span class="qntylabel">RC 66</span>
<div class="part">
<input type="text" name="rc66" id="rc66" class="qnty" placeholder="QTY" pattern="\d*" value="test2"/>
</div>
</div>
</div>

<script>
$(function(){
    $("#swm_box").click(function(){
        if(!$(this).is(":checked")){ //checks if the checkbox/this is selected or not
            $("#swm").val(""); //empty the input value
        } else { } //nothing
    });
});
</script>

वर्तमान में मूल्य को साफ़ करने के लिए पहले चेक/इनपुट के लिए काम करता है।

हालांकि यह आईडी विशिष्ट होने के कारण दूसरे के लिए काम नहीं करता है।

http://jsfiddle.net/qpg7ut0j/8/

0
Ancel Designs 8 अगस्त 2019, 20:55

2 जवाब

सबसे बढ़िया उत्तर

क्षमा करें, मैंने नहीं देखा कि आप jQuery चाहते हैं। वैसे भी, यहाँ एक जावास्क्रिप्ट-समाधान है। मूल रूप से टेक्स्ट-इनपुट-नाम वाले सरणी पर forEach का उपयोग करें। मुझे यकीन है कि jQuery इसे और भी छोटा कर सकता है।

["swm","rc66"].forEach(
  el=>document.querySelector("#"+el+"_box").onchange=e=>{
    if(e.target.checked) {
      document.querySelector("#"+el).value="";
    }
  }
);
<input type="checkbox" id="swm_box"><br>
<input type="text" id="swm" value="test1"/><br>
<input type="checkbox" id="rc66_box"><br>
<input type="text" id="rc66" value="test2"/>
1
jayms 8 अगस्त 2019, 21:10

एक jQuery समाधान के लिए, मुख्य चयनकर्ता को एक आईडी से कक्षा में बदलना होगा। यह निर्दिष्ट वर्ग के साथ सभी तत्वों को लक्षित करेगा। आपको यह पता लगाने के लिए कि कौन सा टेक्स्ट इनपुट बदला जाना चाहिए, फ़ंक्शन के अंदर if स्टेटमेंट को संपादित करने की आवश्यकता होगी। मैंने आईडी को चेकबॉक्स से पकड़ा, आईडी से "_बॉक्स" हटा दिया और टेक्स्ट इनपुट के मान को बदलने के लिए इसका इस्तेमाल किया। परिणामी स्क्रिप्ट इस तरह दिखेगी:

<script>
$(function(){
    $(".inputClass").click(function(){
        if(!$(this).is(":checked")){ //checks if the checkbox/this is selected or not
        var ourCheckedBox = $(this).attr('id'); //get our id from the checked element
        var ourInputToEdit = str.replace("_box", ""); //strip out "_box"
        $("#" + ourInputToEdit + "").val(""); //empty the input value
        } else { } //nothing
    });
});
</script>

Html में केवल एक ही परिवर्तन की आवश्यकता है कि आप उन सभी इनपुट तत्वों में "इनपुट क्लास" की एक श्रेणी जोड़ दें, जिन पर आप .क्लिक फ़ंक्शन लागू करना चाहते हैं।

<div class="child_div_1">MULTI SWITCH
  <hr>
  <div>
    <input type="checkbox" class="apple-switch reveal inputClass" id="swm_box">
    <span class="qntylabel">SWM 30</span>
    <div class="part">
      <input type="text" name="swm" id="swm" class="qnty" placeholder="QTY" pattern="\d*" value="test1"/>
    </div>
  </div>

  <div>
    <input type="checkbox" class="apple-switch reveal inputClass" id="rc66_box">
    <span class="qntylabel">RC 66</span>
    <div class="part">
      <input type="text" name="rc66" id="rc66" class="qnty" placeholder="QTY" pattern="\d*" value="test2"/>
    </div>
  </div>
</div>
0
Jonathan Renner 8 अगस्त 2019, 21:48