HTML में त्रि-स्थिति चेक बॉक्स?

163

HTML में त्रि-राज्य चेक बटन (हाँ, नहीं, अशक्त) का कोई तरीका नहीं है, है ना?

वहाँ किसी भी सरल चाल या काम के आसपास अपने आप से पूरी बात प्रस्तुत करने के लिए बिना कर रहे हैं?

html  forms  checkbox 
— पेका
स्रोत
कार्यात्मक रूप से, आपके उपयोग में 'नहीं' और 'अशक्त' के बीच अंतर क्या है?
— डेविड का कहना है कि
5
नीचे दिए गए उत्तरों को देखें (मेरे लिए छोड़कर)। "नल" का मतलब "नो जवाब" जैसा कुछ होता है ...
— फ्रांज
2
बिल्कुल सही। यह पूर्वजों के साथ एक आइटम है और "अशक्त" का अर्थ है "मूल मूल्य का उपयोग करें"।
— पेक्का
7
त्रि-राज्य चेकबॉक्स के लिए एक वैकल्पिक उपयोग खोज / फ़िल्टरिंग के दौरान होता है। उदाहरण के लिए, मान लें कि मुझे प्रयुक्त कारों की सूची खोजने के लिए एक इंटरफ़ेस मिला है। खोज विकल्पों में से एक हो सकता है कि कार में सनरूफ है या नहीं। तीन राज्यों को निम्नानुसार इस्तेमाल किया जा सकता है: केवल एक सनरूफ वाली कारों को दिखाएं केवल कारों को दिखाएं एक सनरूफ के बारे में दिखाएं अब, निश्चित रूप से, इसे कई तरीकों से नियंत्रित किया जा सकता है ... हम हमें ड्रॉपडाउन कर सकते हैं, या हम एक सेट का उपयोग कर सकते हैं तीन रेडियो बटन ... लेकिन एक त्रिकोणीय राज्य चेकबॉक्स (जो या तो खाली है, एक हरे रंग की जांच है, या इसमें लाल x है) भी एक अच्छा समाधान है।
— मीर
2
यह चेकबॉक्स की सूची के लिए उपयोगी होगा, सूची के सिर पर एक चेकबॉक्स के साथ या तो सभी बचे हुए बॉक्स को चेक या अनचेक करें। यदि सभी की जाँच की जाती है, तो हेडर चेकबॉक्स उसको प्रतिबिंबित कर सकता है। यदि सभी अनियंत्रित हैं तो हेडर चेकबॉक्स उसे भी प्रतिबिंबित कर सकता है। यदि सूची में चेक और अनचेक बॉक्स का एक संयोजन है, तो एक मध्यवर्ती स्थिति में हेडर चेकबॉक्स दिखाने से दृश्य प्रतिक्रिया मिलेगी। हेडर चेकबॉक्स कभी भी मूल्य नहीं लेगा - यह सिर्फ एक दृश्य क्यू और यूआई सहायता है। तीनों राज्यों के बीच हेड चेकबॉक्स को स्विच करने में सक्षम होना भी आसान होगा।
— जेसन

जवाबों:

119

संपादित करें - जानूस ट्रॉल्सन की टिप्पणी के लिए धन्यवाद, मुझे एक बेहतर समाधान मिला:

एचटीएमएल 5 नामक चेकबॉक्स के लिए एक संपत्ति को परिभाषित करता है indeterminate

W3c संदर्भ गाइड देखें । चेकबॉक्स प्रकट करने के लिए नेत्रहीन अनिश्चित इसे सच करने के लिए सेट करें:

element.indeterminate = true;

यहां जानूस ट्रॉल्सन की बेला है । हालाँकि, ध्यान दें:

  • indeterminateराज्य HTML मार्कअप में सेट नहीं किया जा सकता है, यह केवल जावास्क्रिप्ट के जरिए किया जा सकता है (यह देखने JSfiddle परीक्षण और इस सीएसएस चाल में विस्तृत लेख )

  • यह राज्य चेकबॉक्स का मान नहीं बदलता है, यह केवल एक दृश्य क्यू है जो इनपुट की वास्तविक स्थिति को मास्क करता है।

  • ब्राउज़र परीक्षण: मेरे लिए क्रोम 22, फ़ायरफ़ॉक्स 15, ओपेरा 12 और वापस IE7 में काम किया। मोबाइल ब्राउज़र के बारे में, iOS 3.1 पर एंड्रॉइड 2.0 ब्राउज़र और सफारी मोबाइल के पास इसके लिए समर्थन नहीं है।

पिछला उत्तर

एक अन्य विकल्प (के रूप में जीमेल "कुछ चयनित" राज्य के लिए चेकबॉक्स पारदर्शिता के साथ खेलने के लिए होगा है पिछले संस्करणों में किया करते थे)। इसके लिए कुछ जावास्क्रिप्ट और एक CSS क्लास की आवश्यकता होगी। यहां मैंने एक विशेष उदाहरण रखा है जो एक सूची को चेक करने योग्य आइटम और एक चेकबॉक्स को संभालता है जो उनमें से सभी को चुनने की अनुमति देता है। यह चेकबॉक्स "कुछ चयनित" स्थिति दिखाता है जब सूची में से कुछ का चयन किया जाता है।

एक आईडी के #select_allसाथ एक चेकबॉक्स और एक क्लास के साथ कई चेकबॉक्स दिए गए .select_one,

सीएसएस वर्ग जो "सभी का चयन करें" चेकबॉक्स को फीका करता है वह निम्न होगा:

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

और JS कोड जो सभी चेकबॉक्स का त्रि-स्थिति को संभालता है वह निम्न है:

$('#select_all').change (function ()
{
    //Check/uncheck all the list's checkboxes
    $('.select_one').attr('checked', $(this).is(':checked'));
    //Remove the faded state
    $(this).removeClass('some_selected');
});

$('.select_one').change (function ()
{
  if ($('.select_one:checked').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', false);
  else if ($('.select_one:not(:checked)').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', true);
  else
      $('#select_all').addClass('some_selected').attr('checked', true);
});

आप इसे यहाँ आज़मा सकते हैं: http://jsfiddle.net/98BMK/

उम्मीद है की वो मदद करदे!

— pau.moreno
स्रोत
12
— जानूस ट्रॉल्सन
1
क्रोम v35 में परीक्षण किया गया और "ऑल" चेक बॉक्स केवल पहले क्लिक किए गए दूसरे बॉक्स की जांच करता है। इसके बाद यह केवल दूसरे चेक बॉक्स को अन-चेक करने के लिए काम करता है। इस संस्करण में फिक्स्ड: jsfiddle.net/CHRSb/1
— rdans
2
.prop('checked', ...)के बजाय का उपयोग किया जाना चाहिए .attr('checked', ...)।
— लूना
मैंने बग तय किया कि रॉस ने इशारा किया; यहाँ नई बेला ।
— माइक डेनिमोन
48

आप तत्वों पर HTML की indeterminateIDL विशेषता का उपयोग कर सकते हैं input।

— Ms2ger
स्रोत
3
2002 के एक ईमेल में बर्ट बोस के अनुसार (< lists.w3.org/Archives/Public/www-dom/2002JanMar/0014.html> ), IE / Win और IE / Mac ने संस्करण 4 से इसका समर्थन किया है। फ़ायरफ़ॉक्स दिखाई देता है। इसे 3.6 संस्करण में लागू किया है। यह भी सफारी में 2008 में लागू किया गया प्रतीत होता है। मुझे लगता है कि बहुत सारे अंतिम उपयोगकर्ता नहीं हैं।
— सुश्री
इसके बजाय इस url ( help.dottoro.com/ljuocesd.php ) का उपयोग करें। यह दिखाता है कि कौन इसका समर्थन करता है (सभी बार ओपेरा), कब से, और नेत्रहीन प्रदर्शित करता है कि यह क्या है। लोग कल्पना के पन्नों से डरते हैं। +1
— नॉट
15

मेरे प्रस्ताव का उपयोग किया जाएगा

  • तीन राज्यों के लिए तीन उपयुक्त यूनिकोड वर्ण जैसे ✅, characters, characters
  • एक सादा पाठ इनपुट फ़ील्ड (आकार = 1)
  • कोई सीमा नहीं
  • सिफ़ पढ़िये
  • कोई कर्सर प्रदर्शित न करें
  • तीन राज्यों में घूमने के लिए ऑनक्लिक हैंडलर

उदाहरण यहां देखें: 

/**
 *  loops thru the given 3 values for the given control
 */
function tristate(control, value1, value2, value3) {
  switch (control.value.charAt(0)) {
    case value1:
      control.value = value2;
    break;
    case value2:
      control.value = value3;
    break;
    case value3:
      control.value = value1;
    break;
    default:
      // display the current value if it's unexpected
      alert(control.value);
  }
}
function tristate_Marks(control) {
  tristate(control,'\u2753', '\u2705', '\u274C');
}
function tristate_Circles(control) {
  tristate(control,'\u25EF', '\u25CE', '\u25C9');
}
function tristate_Ballot(control) {
  tristate(control,'\u2610', '\u2611', '\u2612');
}
function tristate_Check(control) {
  tristate(control,'\u25A1', '\u2754', '\u2714');
}
<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
     case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
     case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
     case '&#x274C': this.form.tristate.value='&#x2753;'; break; 
       };" />
स्निपेट का विस्तार करें

— वोल्फगैंग फाहल
स्रोत
4

आप एक अनिश्चित स्थिति का उपयोग कर सकते हैं: http://css-tricks.com/indeterminate-checkboxes/ । यह बॉक्स से बाहर ब्राउज़रों द्वारा समर्थित है और किसी भी बाहरी जेएस लाइब्रेरी की आवश्यकता नहीं है।

— altso
स्रोत
3
— हैशबोर्न
3

आप उस कार्यक्षमता को प्राप्त करने के लिए रेडियो समूहों का उपयोग कर सकते हैं:

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null
— फ्रांज
स्रोत
1
मुझे पता है कि, धन्यवाद। :) मैं वर्तमान में चयन का उपयोग कर रहा हूं, लेकिन फ़ॉर्म थोड़ा अव्यवस्थित हो रहा है।
— पेकाका
1
अच्छा, फिर क्या वास्तव में तीसरा राज्य किसी भी तरह दिखेगा? ठीक उसी तरह जब चेकबॉक्स अक्षम होता है? आप उसे कैसे ट्रिगर करना चाहेंगे?
— फ्रांज़
3

मुझे लगता है कि सबसे अर्थपूर्ण तरीका readonlyविशेषता का उपयोग कर रहा है जो चेकबॉक्स इनपुट हो सकता है। कोई सीएसएस, कोई चित्र नहीं, आदि; एक अंतर्निहित HTML संपत्ति!

फिडल देखें:
http://jsfiddle.net/chriscoyier/mGg85/2/

जैसा कि यहाँ पिछली ट्रिक में बताया गया है: http://css-tricks.com/indeterminate-checkboxes/

— Webinan
स्रोत
अच्छा समाधान लेकिन दुख की बात यह IE में काम नहीं करता है (संस्करण 11 के साथ परीक्षण) के रूप में तेजी से क्लिकों अब मान्यता प्राप्त नहीं हैं।
— वीरुस्तरीनीट
3

यहाँ उल्लेख indeterminateविशेषता का उपयोग कर एक चल उदाहरण है :

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;
<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>
स्निपेट का विस्तार करें

बस कोड स्निपेट चलाएं यह देखने के लिए कि यह कैसा दिखता है।

— gil.fernandes
स्रोत
2

@Franz जवाब की तरह आप भी इसे चुनिंदा के साथ कर सकते हैं। उदाहरण के लिए:

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

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

जब जावास्क्रिप्ट अक्षम होता है तो कम से कम, आप इसे कॉलबैक के रूप में उपयोग कर सकते हैं। उदाहरण के लिए, इसे एक आईडी दें और लोड ईवेंट में इसे अनिश्चित स्थिति के साथ चेकबॉक्स के जावास्क्रिप्ट संस्करण में बदल दें।

— PhoneixS
स्रोत
2

उपरोक्त सभी उल्लेखों के अलावा, jQuery प्लगइन्स भी हैं जो मदद कर सकते हैं:

व्यक्तिगत चेकबॉक्स के लिए:

पेड़ की तरह व्यवहार चेकबॉक्स के लिए:

EDIT दोनों पुस्तकालय ' अनिश्चित ' चेकबॉक्स विशेषता का उपयोग करते हैं , क्योंकि Html5 में यह विशेषता सिर्फ स्टाइलिंग के लिए है ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#clbox-state ), शून्य मान कभी सर्वर पर नहीं भेजा जाता है (चेकबॉक्स में केवल दो मान हो सकते हैं)।

इस मान को सर्वर में जमा करने में सक्षम होने के लिए, मैंने छिपे हुए प्रतिपक्ष फ़ील्ड बनाए हैं, जो कुछ जावास्क्रिप्ट का उपयोग करके फ़ॉर्म सबमिशन पर पॉपुलेट किए जाते हैं। सर्वर की ओर, आपको मूल चेकबॉक्स के बजाय उन समकक्ष फ़ील्ड्स को जांचना होगा।

मैंने पहली लाइब्रेरी (स्टैंडअलोन चेकबॉक्स) का उपयोग किया है जहां यह महत्वपूर्ण है:

  • चेक, अनियंत्रित, अनिश्चित मानों को प्रारंभ करें
  • वास्तविक मूल्य प्राप्त करने के लिए .val () फ़ंक्शन का उपयोग करें
  • काम नहीं कर सकते .स्टेट (शायद मेरी गलती)

उम्मीद है की वो मदद करदे।

— फ्रैंक सेबस्टी
स्रोत
2

यहाँ सरल jQuery और संपत्ति के साथ अन्य उदाहरण data-checked:

 $("#checkbox")
  .click(function(e) {
    var el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="checkbox" value="" checked id="checkbox"> Tri-State Checkbox </label>
स्निपेट का विस्तार करें

— रवि मकवाना
स्रोत
1

@BoltClock उत्तर का संदर्भ लेते हुए , यहां एक अधिक जटिल पुनरावर्ती विधि के लिए मेरा समाधान है:

http://jsfiddle.net/gx7so2tq/2/

यह सबसे सुंदर समाधान नहीं हो सकता है, लेकिन यह मेरे लिए ठीक काम करता है और काफी लचीला है।

मैं कंटेनर को परिभाषित करने वाली दो डेटा ऑब्जेक्ट का उपयोग करता हूं:

data-select-all="chapter1"

और तत्व स्वयं:

data-select-some="chapter1"

दोनों का मूल्य समान है। एक चेकबॉक्स के भीतर दोनों डेटा-ऑब्जेक्ट का संयोजन sublevels की अनुमति देता है, जो पुनरावर्ती स्कैन किए जाते हैं। इसलिए परिवर्तन को रोकने के लिए दो "सहायक" कार्यों की आवश्यकता होती है।

— MFH
स्रोत
0

HTML फॉर्म एलिमेंट्स को डिसेबल करना संभव है - क्या ऐसा नहीं होगा? आपके उपयोगकर्ता इसे तीन राज्यों में से एक में देखेंगे, अर्थात जाँच, अनियंत्रित और अक्षम, जिसे बाहर निकाला जाएगा और क्लिक करने योग्य नहीं होगा। मेरे लिए, यह "शून्य" या "लागू नहीं" के समान लगता है या जो भी आप उस तीसरे राज्य में देख रहे हैं।

— AmbroseChapel
स्रोत
बहुत अच्छा विचार है, लेकिन मुझे उपयोगकर्ता को फिर से क्लिक करने में सक्षम होने की आवश्यकता है। मुझे डर है कि एक अक्षम चेकबॉक्स पर, मुझे फायरिंग की घटनाओं और इतने पर परेशानी होगी।
— पेक्का
आप अभी भी एक अक्षम चेकबॉक्स का मूल्य देख सकते हैं, जो मूल्य महत्वपूर्ण नहीं होने पर उपयोगकर्ता को भ्रमित कर रहा है।
— Janus Troelsen
मुझे लगता है कि 'अशक्त' सवाल का जवाब नहीं देने वाले उपयोगकर्ता का प्रतिनिधित्व करने के लिए है। यह जरूरी नहीं है कि प्रश्न लागू न हो।
— bdsl
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.