Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Чек, радио

Бүрэн дахин бичсэн шалгах бүрэлдэхүүн хэсэгтэй нийцтэй хөтчүүд болон төхөөрөмжүүд хоорондын шалгах хайрцаг, радио үүсгээрэй.

Энэ хуудсан дээр

Арга барил

Хөтчийн өгөгдмөл хайрцгууд болон радиогуудын тусламжтайгаар .form-checkорлуулгын төрөлд зориулсан цуврал ангиуд солигдсон бөгөөд энэ нь HTML элементүүдийн зохион байгуулалт, үйл ажиллагааг сайжруулж, илүү их өөрчлөн тохируулж, хөтчийн нийцтэй байдлыг хангадаг. Сонголтууд нь жагсаалтаас нэг буюу хэд хэдэн сонголтыг сонгоход зориулагдсан бол радио нь олон сонголтоос нэг сонголтыг сонгоход зориулагдсан.

Бүтцийн хувьд бидний <input>s болон <label>s нь доторхоос ялгаатай ах дүү элементүүд <input>юм <label>. Энэ нь арай илүү дэлгэрэнгүй, учир нь та idболон for-тай холбогдох шинж чанаруудыг <input>зааж өгөх ёстой <label>. Бид дүү сонгогчийг ( ) эсвэл гэх мэт ~бүх <input>мужид ашигладаг . Ангитай хослуулснаар бид зүйл бүрийн төлөвт тулгуурлан текстийг хялбархан загварчилж чадна .:checked:disabled.form-check-label<input>

Манай чекүүд нь тохируулсан Bootstrap дүрсийг ашиглан шалгагдсан эсвэл тодорхойгүй төлөвийг заадаг.

Шалгалтууд

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Тодорхой бус

JavaScript-ээр гараар тохируулах үед шалгах хайрцагууд нь псевдо классыг ашиглаж болно :indeterminate(үүнийг зааж өгөх боломжтой HTML шинж чанар байхгүй).

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Идэвхгүй

disabledОролтын төлөвийг харуулахын тулд атрибут нэмээд холбогдох <label>s нь цайвар өнгөтэй таарч автоматаар загварчлагдана.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Радио

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Идэвхгүй

disabledОролтын төлөвийг харуулахын тулд атрибут нэмээд холбогдох <label>s нь цайвар өнгөтэй таарч автоматаар загварчлагдана.

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Шилжүүлэгч

Шилжүүлэгч нь захиалгат тэмдэглэгээний тэмдэглэгээтэй боловч .form-switchсэлгэн шилжүүлэгчийг үзүүлэхийн тулд классыг ашигладаг. role="switch"Хяналтын мөн чанарыг энэ үүргийг дэмждэг туслах технологид илүү нарийвчлалтай хүргэхийн тулд ашиглах талаар бодож үзээрэй . Хуучин туслах технологиудад үүнийг ердийн тэмдэглэгээ болгон зарлах болно. Шилжүүлэгч нь мөн disabledшинж чанарыг дэмждэг.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Өгөгдмөл (овоолсон)

Өгөгдмөл байдлаар, ойрын ах дүүс болох дурын тооны шалгах хайрцаг болон радиог босоо байдлаар байрлуулж, -тай тохирох зайтай байрлуулна .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Шугаманд

.form-check-inlineДурын зүйл дээр нэмэх замаар ижил хэвтээ эгнээнд байгаа шалгах хайрцаг эсвэл радиог бүлэглээрэй .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Шошгогүй

.form-checkШошгоны текстгүй тэмдэглэгээ болон радиогийн боодлыг орхи . Туслах технологид (жишээ нь, ашиглах aria-label) хандах боломжтой нэр өгөхөө бүү мартаарай. Дэлгэрэнгүй мэдээллийг маягтын тойм хүртээмжтэй хэсгээс үзнэ үү.

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Товчлуур сэлгэх

Элементүүд дээр .btnбиш харин хэв маягийг ашиглан товчлуур шиг шалгах хайрцаг болон радио товчлууруудыг үүсгээрэй . Шаардлагатай бол эдгээр сэлгэх товчлууруудыг товчлуурын бүлэгт нэмж бүлэглэж болно ..form-check-label<label>

Сонгох нүдийг асаах товчлуурууд

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Харааны хувьд эдгээр шалгах нүдийг асаах товчлуурууд нь залгаас солих товчлууруудтай ижил байна . Гэсэн хэдий ч тэдгээрийг туслах технологиор өөр өөрөөр дамжуулдаг: шалгах нүдийг сэлгэхийг дэлгэц уншигчид "шалгасан"/"шалгагдаагүй" гэж зарлах болно (учир нь тэдгээр нь гадаад төрхийг үл харгалзан тэдгээр нь үндсэндээ тэмдэглэгээ хэвээр байна), харин товчлуурын залгаасыг солих товчлуурууд нь "товчлуур"/"товч дарагдсан" гэж зарласан. Эдгээр хоёр аргын хоорондох сонголт нь таны үүсгэж буй сэлгэгчийн төрлөөс шалтгаална, мөн унтраалга нь шалгах хайрцаг эсвэл бодит товчлуур гэж зарлахад хэрэглэгчдэд ойлгомжтой байх эсэхээс хамаарна.

Радио солих товчлуурууд

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Товчлогдсон хэв маяг

-ийн янз бүрийн хувилбарууд .btn, тухайлбал янз бүрийн тодорхойлсон хэв маягийг дэмждэг.



<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Сасс

Хувьсагч

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;