এইচটিএমএলে ত্রি-রাষ্ট্রের চেক বাক্স?

163

এইচটিএমএলে ত্রি-রাষ্ট্রীয় চেক বোতাম (হ্যাঁ, না, নাল) রাখার কোনও উপায় নেই, তাই না?

নিজের দ্বারা পুরো জিনিসটি রেন্ডার না করেই কি কোনও সহজ কৌশল বা কাজের আশপাশ রয়েছে?

html  forms  checkbox 
— Pekka
সূত্র
কার্যত, আপনার ব্যবহারে 'না' এবং 'নাল' এর মধ্যে পার্থক্য কী?
— ডেভিড মনিকা
5
নীচের উত্তরগুলি দেখুন (আমার ব্যতীত)। "নুল" এর অর্থ "উত্তর নেই" এর মতো কিছু ...
— ফ্রাঞ্জ
2
যথাযথভাবে। এটি পূর্বপুরুষদের সাথে একটি আইটেম এবং "নাল" এর অর্থ "পিতামাতার মান ব্যবহার করুন"।
— পেক্কা
7
অনুসন্ধান / ফিল্টারিংয়ের সময় ত্রি-রাষ্ট্রের চেকবক্সের বিকল্প ব্যবহার হ'ল। উদাহরণস্বরূপ, ধরে নেওয়া যাক আমি ব্যবহৃত গাড়ির তালিকা অনুসন্ধান করার জন্য একটি ইন্টারফেস পেয়েছি। অনুসন্ধানের বিকল্পগুলির মধ্যে একটি হতে পারে গাড়ীর সানরুফ রয়েছে কিনা। তিনটি রাজ্য নিম্নরূপে ব্যবহার করা যেতে পারে: সানরুফের সাথে কেবল গাড়িগুলি দেখান কেবলমাত্র একটি সানরুফের সাথে গাড়িগুলি দেখান উভয়ই এখনই অবশ্যই এটি বেশ কয়েকটি উপায়ে পরিচালনা করা যেতে পারে ... আমরা আমাদের ড্রপডাউন করতে পারি, বা আমরা একটি সেট ব্যবহার করতে পারি তিনটি রেডিও বোতামের ... তবে একটি ত্রি-রাষ্ট্রীয় চেকবক্স (এটি হয় খালি, একটি সবুজ চেক আছে বা এতে একটি লাল এক্স রয়েছে) এটিও একটি দুর্দান্ত সমাধান।
— মীর
2
বাকী সমস্ত বাক্স চেক বা চেক করতে তালিকার শীর্ষে একটি চেকবক্স সহ চেকবক্সগুলির তালিকার জন্য এটি কার্যকর হবে। যদি সমস্ত চেক করা হয়, তবে শিরোনাম চেকবক্সটি এটি প্রতিফলিত করতে পারে। যদি সমস্ত কিছু চেক না করা থাকে তবে শিরোনামের চেকবাক্সটি এটিও প্রতিফলিত করতে পারে। তালিকায় যদি পরীক্ষিত এবং চেক না করা বাক্সগুলির সংমিশ্রণ থাকে, তবে মধ্যবর্তী অবস্থায় শিরোনাম চেকবক্সটি দেখানো ভিজ্যুয়াল প্রতিক্রিয়া সরবরাহ করবে। এই শিরোনাম চেকবক্সটি কখনই কোনও মান বহন করে না - এটি কেবল একটি ভিজ্যুয়াল কিউ এবং ইউআই সহায়তা। তিনটি রাজ্যের মধ্যে হেড চেকবক্সটি স্যুইচ করতে সক্ষম হওয়াই সুবিধাজনক হবে।
— জেসন 16

উত্তর:

119

সম্পাদনা করুন - জানুস ট্রয়লসনের মন্তব্যে ধন্যবাদ, আমি এর থেকে আরও ভাল সমাধান পেয়েছি:

এইচটিএমএল কল করা চেকবক্সগুলির জন্য একটি সম্পত্তি সংজ্ঞা দেয় indeterminate

দেখুন W3C রেফারেন্স গাইড । চেকবাক্সটি চাক্ষুষভাবে অনির্দিষ্টরূপে প্রদর্শিত করতে এটি সত্যতে সেট করুন:

element.indeterminate = true;

এখানে জানুস ট্রয়লসনের ঝাঁকুনি । নোট, তবে, যে:

  • indeterminateরাষ্ট্র HTML মার্কআপ মধ্যে সেট করা যাবে না, এটি শুধুমাত্র জাভাস্ক্রিপ্ট মাধ্যমে করা যেতে পারে (এটি দেখতে JSfiddle পরীক্ষা এবং এই সিএসএস ঠাট বিস্তারিত নিবন্ধ )

  • এই রাজ্যটি চেকবাক্সের মান পরিবর্তন করে না, এটি কেবলমাত্র একটি ভিজ্যুয়াল কিউ যা ইনপুটটির আসল অবস্থার মুখোশ দেয়।

  • ব্রাউজার পরীক্ষা: আমার জন্য ক্রোম 22, ফায়ারফক্স 15, অপেরা 12 এবং আই 7 তে ফিরে কাজ করেছেন। মোবাইল ব্রাউজারগুলির বিষয়ে, আইওএস ৩.১ এ অ্যান্ড্রয়েড ২.০ ব্রাউজার এবং সাফারি মোবাইল এর জন্য সমর্থন নেই।

পূর্ববর্তী উত্তর

আরেকটি বিকল্প (যেমন জিমেইল "কিছু নির্বাচিত" রাষ্ট্রপক্ষে চেকবক্সটি স্বচ্ছতা সাথে খেলতে হবে না পূর্ববর্তী সংস্করণ কি করতে ব্যবহৃত হয়)। এর জন্য কিছু জাভাস্ক্রিপ্ট এবং একটি সিএসএস ক্লাসের প্রয়োজন হবে। এখানে আমি একটি বিশেষ উদাহরণ রেখেছি যা চেকযোগ্য আইটেমগুলির সাথে একটি তালিকা পরিচালনা করে এবং একটি চেকবাক্স যা তাদের / সমস্ত কিছুই নির্বাচন করতে দেয়। কিছু তালিকা আইটেম নির্বাচন করা হলে এই চেকবাক্সটি "কিছু নির্বাচিত" রাষ্ট্র প্রদর্শন করে।

একটি আইডির #select_allসাথে একটি চেকবক্স এবং একটি ক্লাস সহ বেশ কয়েকটি চেকবক্স দেওয়া হয়েছে .select_one,

সিএসএস ক্লাস যা "সমস্ত নির্বাচন করুন" চেকবাক্সকে বিবর্ণ করে তা নিম্নলিখিত হবে:

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

এবং জেএস কোড যা নির্বাচিত সমস্ত চেকবক্সের ত্রি-স্থিতি পরিচালনা করে তা নিম্নলিখিত:

$('#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
ক্রোম ভি 35 তে পরীক্ষা করা হয়েছে এবং "সমস্ত" চেক বাক্সে প্রথমবার ক্লিক করা কেবলমাত্র অন্য বাক্সগুলি পরীক্ষা করে। এর পরে এটি কেবলমাত্র অন্য চেক বাক্সগুলিকে আন-চেক করতে কাজ করে। এই সংস্করণে স্থির: jsfiddle.net/CHRSb/1
— rdans
2
.prop('checked', ...)পরিবর্তে ব্যবহার করা উচিত .attr('checked', ...)।
— লুনা
রসগুলি নির্দেশ করে আমি বাগগুলি ঠিক করেছি; এখানে নতুন ভাজা ।
— মাইক DeSimone
48

আপনি উপাদানগুলির উপর এইচটিএমএল এর indeterminateআইডিএল বৈশিষ্ট্যটি ব্যবহার করতে পারেন input।

— Ms2ger
সূত্র
3
বার্ট বোসের মতে ২০০২ (< list.w3.org/ আর্কাইভস / প্রজাতন্ত্র / www.wwdom / 2002 জনমার / 0014 এইচটিএমএল> ) এর ইমেলটিতে , আইই / উইন এবং আইই / ম্যাক 4 সংস্করণ 4 সাল থেকে এটি সমর্থন করেছে Firef সংস্করণ 3.6 এ এটি প্রয়োগ করেছে। এটি সাফারিতে ২০০৮ সালে প্রয়োগ করা হয়েছিল বলে মনে হয় I আমি মনে করি এটি শেষ ব্যবহারকারীদের বেশি করে না।
— Ms2ger
পরিবর্তে এই url ( help.dottoro.com/ljuocesd.php ) ব্যবহার করুন। এটি দেখায় যে কে এটি সমর্থন করে (সবাই অপেরা বার করে), কখন থেকে এবং দৃশ্যত এটি কী তা প্রদর্শন করে। লোকেরা পৃষ্ঠাগুলি দেখে ভয় পান। এই-না-প্লাগইন সমাধানের জন্য +1
— হ্যাশব্রাউন
15

আমার প্রস্তাব ব্যবহার করা হবে

  • তিনটি রাজ্যের জন্য যথাযথ তিনটি ইউনিকোড অক্ষর যেমন ❓, ✅, ❌ ❌
  • একটি সরল পাঠ্য ইনপুট ক্ষেত্র (আকার = 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। কোনও সিএসএস, কোনও চিত্র ইত্যাদি নয়; একটি অন্তর্নির্মিত এইচটিএমএল সম্পত্তি!

ফ্রেড দেখুন:
http://jsfiddle.net/chriscoyier/mGg85/2/

শেষ কৌশলটিতে এখানে বর্ণিত হিসাবে: http://css-tricks.com/indeterminate-checkboxes/

— Webinan
সূত্র
দুর্দান্ত সমাধান তবে দুঃখের বিষয় এটি দ্রুত কার্যকর ক্লিকগুলি আর স্বীকৃত নয় বলে IE (সংস্করণ 11 এর সাথে পরীক্ষা করা) তে কাজ করে না।
— ViRuSTriNiTy
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

@ ফ্র্যাঞ্জ উত্তর পছন্দ করুন আপনি এটি একটি নির্বাচন করেও করতে পারেন। উদাহরণ স্বরূপ:

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

এটির সাহায্যে আপনি একটি কংক্রিট মানও দিতে পারেন যা ফর্মের সাথে প্রেরণ করা হবে, আমি মনে করি চেকবক্সের জাভাস্ক্রিপ্ট অনির্দিষ্ট সংস্করণের সাথে এটি চেকবক্সের আন্ডারলাইন মান প্রেরণ করবে।

অন্তত জাভাস্ক্রিপ্ট অক্ষম করা থাকলে আপনি এটি কলব্যাক হিসাবে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এটিকে একটি আইডি দিন এবং লোড ইভেন্টে এটি অনির্দিষ্ট স্থিতির সাথে চেকবক্সের জাভাস্ক্রিপ্ট সংস্করণে পরিবর্তন করুন।

— PhoneixS
সূত্র
2

উপরে বর্ণিত সমস্তগুলি ছাড়াও, এখানে jQuery প্লাগইন রয়েছে যা খুব সাহায্য করতে পারে:

পৃথক চেকবাক্সগুলির জন্য:

গাছের মতো আচরণের চেকবক্সগুলির জন্য:

সম্পাদনা উভয় গ্রন্থাগারই ' অনির্দিষ্ট ' চেকবক্স বৈশিষ্ট্য ব্যবহার করে , যেহেতু এইচটিএমএল 5 এ এই বৈশিষ্ট্যটি কেবল স্টাইলিংয়ের জন্য ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-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

@ বোল্টক্লক উত্তরটি উল্লেখ করে আরও জটিল পুনরাবৃত্তির পদ্ধতির জন্য এখানে আমার সমাধান:

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

এটি সবচেয়ে সুন্দর সমাধান নাও হতে পারে তবে এটি আমার পক্ষে ভাল কাজ করে এবং বেশ নমনীয়।

আমি ধারকটি সংজ্ঞায়িত করে দুটি ডেটা অবজেক্ট ব্যবহার করি:

data-select-all="chapter1"

এবং উপাদানগুলি নিজেই:

data-select-some="chapter1"

উভয় একই মান আছে। একটি চেকবাক্সের মধ্যে উভয় ডেটা-অবজেক্টের সংমিশ্রণ সুবলভেলগুলিকে মঞ্জুরি দেয় যা পুনরাবৃত্তভাবে স্ক্যান করা হয়। সুতরাং পরিবর্তন ট্রিগার রোধ করতে দুটি "সহায়ক" ফাংশন প্রয়োজন।

— MFH
সূত্র
0

এইচটিএমএল ফর্ম উপাদানগুলি অক্ষম করা সম্ভব - এটি কি না? আপনার ব্যবহারকারীরা এটিকে তিনটি অবস্থার মধ্যে একটিতে দেখতে পাবেন, যেমন চেক, চেক করা এবং অক্ষম করা হয়েছে, যা গ্রাইয়েড হবে এবং ক্লিকযোগ্য নয়। আমার কাছে এটি "নাল" বা "প্রযোজ্য নয়" বা আপনি যে তৃতীয় অবস্থায় সন্ধান করছেন তার মতোই বলে মনে হচ্ছে।

— AmbroseChapel
সূত্র
খুব ভাল ধারণা, তবে ব্যবহারকারীকে এটিতে আবার ক্লিক করতে সক্ষম হতে হবে। আমি আশঙ্কা করি যে কোনও অক্ষম চেকবক্সে, ইভেন্টগুলিতে গুলি চালাতে আমার আরও সমস্যা হবে।
— পেক্কা
আপনি এখনও অক্ষম চেকবক্সের মান দেখতে পাচ্ছেন যা মানটি গুরুত্বপূর্ণ না হলে ব্যবহারকারীকে বিভ্রান্ত করছে।
— জানুস ট্রয়লসেন
আমি মনে করি যে 'নাল' অর্থ ব্যবহারকারীর প্রতিনিধিত্ব করা যা প্রশ্নের উত্তর সরবরাহ করে না। এটি অগত্যা এর অর্থ এই নয় যে প্রশ্নটি প্রযোজ্য নয়।
— বিডিএসএল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.