अनिश्चित चेकबॉक्स के साथ ब्राउज़र अंतरों से निपटने के लिए कैसे करें

Question

प्राइमर: एक HTML चेकबॉक्स indeterminate के रूप में सेट किया जा सकता है, जो इसे न तो चेक किया गया है और न ही अनचेक किया गया है। यहां तक ​​कि इस अनिश्चित स्थिति में, अभी भी एक अंतर्निहित बूलियन checked राज्य है।

---

जब एक अनिश्चित चेकबॉक्स क्लिक किया जाता है, यह अपने indeterminate राज्य खो देता है। ब्राउज़र (फ़ायरफ़ॉक्स) के आधार पर, यह checked संपत्ति को अतिरिक्त रूप से टॉगल कर सकता है।

This jsfiddle स्थिति को दर्शाता है। फ़ायरफ़ॉक्स में, चेकबॉक्स में से किसी एक पर क्लिक करने से उन्हें एक बार प्रारंभिक अंतर्निहित checked स्थिति टॉगल करनी पड़ती है। आईई में, checked संपत्ति पहले क्लिक के लिए अकेली रह गई है।

मैं सभी ब्राउज़रों को ऐसा व्यवहार करना चाहूंगा, भले ही इसका मतलब अतिरिक्त जावास्क्रिप्ट हो। दुर्भाग्य से, indeterminate संपत्ति से पहले झूठी पर सेट है onclick हैंडलर (या onchange और jQuery change) कहा जाता है, तो मैं पहचान नहीं कर सकता यह एक indeterminate चेकबॉक्स या नहीं पर एक क्लिक के कहा जाता है या नहीं।

mouseup और keyup (स्पेस बार टॉगल के लिए) की घटनाओं से पहले indeterminate राज्य दिखाते हैं, लेकिन मैं नहीं बल्कि नहीं कि विशिष्ट होना चाहते हैं: यह कमजोर लगती है।

मैं चेकबॉक्स (data-indeterminate या इसी तरह) पर एक अलग संपत्ति को बनाए रख सकता था, लेकिन मैं जानना चाहता था कि कोई आसान समाधान है या नहीं, और/या यदि अन्य लोगों के समान समस्याएं हैं।

Answer 1

आप एक inderterminate चेकबॉक्स जो क्लिक पर सभी ब्राउज़रों पर जाँच हो जाता है करने के लिए चाहते हैं, तो (या कम से कम आईई, क्रोम और FF5 + पर), आप के रूप में यहाँ http://jsfiddle.net/K6nrT/6/ दिखाया जाँच की विशेषता को सही ढंग से आरंभ करने के लिए, की जरूरत है। मैं निम्नलिखित कार्यों लिखा है मदद करने के लिए:

/// Gives a checkbox the inderminate state and the right 
/// checked state so that it becomes checked on click 
/// on click on IE, Chrome and Firefox 5+ 
function makeIndeterminate(checkbox) 
{ 
    checkbox.checked = getCheckedStateForIndeterminate(); 
    checkbox.indeterminate = true; 
} 

और दिलचस्प समारोह जो सुविधा का पता लगाने पर निर्भर करता है:

/// Determine the checked state to give to a checkbox 
/// with indeterminate state, so that it becomes checked 
/// on click on IE, Chrome and Firefox 5+ 
function getCheckedStateForIndeterminate() 
{ 
    // Create a unchecked checkbox with indeterminate state 
    var test = document.createElement("input"); 
    test.type = "checkbox"; 
    test.checked = false; 
    test.indeterminate = true; 

    // Try to click the checkbox 
    var body = document.body; 
    body.appendChild(test); // Required to work on FF 
    test.click(); 
    body.removeChild(test); // Required to work on FF 

    // Check if the checkbox is now checked and cache the result 
    if (test.checked) 
    { 
     getCheckedStateForIndeterminate = function() { return false; }; 
     return false; 
    } 
    else 
    { 
     getCheckedStateForIndeterminate = function() { return true; }; 
     return true; 
    } 
} 

कोई छवि चाल, कोई jQuery, बिना किसी अतिरिक्त विशेषताओं और कोई ईवेंट प्रबंधन शामिल किया गया। यह केवल साधारण जावास्क्रिप्ट प्रारंभिकरण पर निर्भर करता है (ध्यान दें कि "अनिश्चित" विशेषता HTML मार्कअप में सेट नहीं की जा सकती है, इसलिए जावास्क्रिप्ट प्रारंभिकरण की आवश्यकता होती है)।

Answer 2

अच्छी तरह से अपनी खुद की क्लिक करने योग्य छवि बनाएं और इसे कुछ ऐसा करने के लिए कुछ जावा (स्क्रिप्ट) का उपयोग करें। मुझे संदेह है कि इस राज्य को कितने उपयोगकर्ता समझेंगे, इसलिए सावधान रहें जहां आप इसका उपयोग करते हैं।

Answer 3

यह मेरी समस्या

$(".checkbox").click(function(){ 
    $(this).change(); 
}); 

Answer 4

हल मुझे यकीन है कि समारोह का उपयोग कर जाएगा मान सेट करने के अनिश्चित चेक बॉक्स के लिए अच्छा समाधान होगा, क्योंकि नहीं कर रहा हूँ:

• आप हर जगह बदलने के लिए होगा जहां उनका उपयोग कर रहे हैं,
• यदि उपयोगकर्ता चेक-बॉक्स पर क्लिक किए बिना फॉर्म सबमिट करते हैं, तो मान लें कि आपका बैकएंड प्राप्त होगा ब्राउज़र के आधार पर अलग होगा।

लेकिन मुझे यह निर्धारित करने के लिए चालाक तरीका पसंद है कि ब्राउजर कैसे काम करता है। तो आप इसे देखने के लिए isCheckedAfterIndeterminate() सामान्य सामान्य window.navigator.userAgent.indexOf('Trident') >= 0 देख सकते हैं (या शायद अन्य ब्राउज़र जो असामान्य तरीके से काम करता है)।

तो मेरी समाधान हो जाएगा:

/// Determine the checked state to give to a checkbox 
/// with indeterminate state, so that it becomes checked 
/// on click on IE, Chrome and Firefox 5+ 
function isCheckedAfterIndeterminate() 
{ 
    // Create a unchecked checkbox with indeterminate state 
    var test = document.createElement("input"); 
    test.type = "checkbox"; 
    test.checked = false; 
    test.indeterminate = true; 

    // Try to click the checkbox 
    var body = document.body; 
    body.appendChild(test); // Required to work on FF 
    test.click(); 
    body.removeChild(test); // Required to work on FF 

    // Check if the checkbox is now checked and cache the result 
    if (test.checked) { 
     isCheckedAfterIndeterminate = function() { return false; }; 
     return false; 
    } else { 
     isCheckedAfterIndeterminate = function() { return true; }; 
     return true; 
    } 
} 

// Fix indeterminate checkbox behavoiur for some browsers. 
if (isCheckedAfterIndeterminate()) { 
    $(function(){ 
     $(document).on('mousedown', 'input', function(){ 
      // Only fire the change event if the input is indeterminate. 
      if (this.indeterminate) { 
       this.indeterminate = false; 
       $(this).trigger('change'); 
      } 
     }); 
    }); 
}