जावास्क्रिप्ट फ़ंक्शन दो बार चलाया जाता है?

Question

मैं थोड़ी उलझन में हूं।

मेरे पास एक चेकबॉक्स है जो उपयोगकर्ता क्लिक कर सकता है यह निर्धारित करता है कि मेरे पृष्ठ पर एक निजी फोन नंबर सभी या केवल प्रशासन के लिए दिखाना चाहिए या नहीं। जब बॉक्स क्लिक किया जाता है, तो मैं यह सुनिश्चित करना चाहता हूं कि आपको पहले परीक्षण करने के लिए केवल इसकी स्थिति मुद्रित करने की अनुमति दी जाए। और जब मैं इस समारोह को चलाता हूं, तो यह दो बार चलाया जाता है।

मैंने कहीं और पढ़ा है कि यह कॉलबैक के कारण है? लेकिन मैं झूठी वापसी कर रहा हूं इसलिए यह सही नहीं होना चाहिए?

मैं एक जावास्क्रिप्ट विज़ार्ड नहीं हूं इसलिए कई चीजें हैं जो मुझे अभी भी जावास्क्रिप्ट और एएसपी के साथ इसकी बातचीत के बारे में नहीं पता हैं।

/** 
* Used to Check whether a Private Phone number should be hidden or shown. 
*/ 
function ValidateHidePrivate() { 
    if (scope["pickeduser"] != scope["credential"]) { 
     alert("Not allowed"); 
     return false; 
    } else { 
     alert(document.getElementById("HidePrivate").checked); 
     return false; 
    } 
} 

और HTML:

<label for="HidePrivate" onclick="ValidateHidePrivate()"> 
    <input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" /> 
    Hide my Private Phone Number 
</label> 

किसी भी मदद की?

Answer 1

यह क्योंकि एकहै for विशेषता के साथclick<input type="checkbox"> तत्व की घटना को बढ़ाता है जो क्लिक होने पर जुड़ा हुआ है।

आपको click ईवेंट हैंडलर input पर label पर बाध्य करना चाहिए।

function ValidateHidePrivate() { 
 
     alert(); 
 
}

<label for="HidePrivate" > 
 
    <input type="checkbox" name="HidePrivate" onclick="ValidateHidePrivate()" id="HidePrivate" value="no" /> 
 
    Hide my Private Phone Number 
 
</label>

Answer 2

जब आप अपने लेबल पर क्लिक करते हैं, तो क्या यह हो सकता है कि ईवेंट क्लिक चेकबॉक्स पर भी चलता है? अपने फ़ंक्शन के अंदर event.stopPropagation() जोड़ने का प्रयास करें।

Answer 3

ईवेंट हैंडलर केवल input पर जोड़ें। इसके अलावा input लेबल के अंदर घोंसला है।

आशा इस स्निपेट उपयोगी होगा

एचटीएमएल

<input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" onclick="ValidateHidePrivate()" /> 

<label for="HidePrivate"> 
    Hide my Private Phone Number 
</label> 

जे एस

function ValidateHidePrivate() { 
    // rest of code 
} 

DEMO