in English

Чек, радио

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

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

Арга барил

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

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

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

Шалгалтууд

Өгөгдмөл хайрцаг

Сонгосон нүд

html

<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 шинж чанар байхгүй).

Тодорхой бус шалгах хайрцаг

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 нь цайвар өнгөтэй таарч автоматаар загварчлагдана.

Тодорхойгүй шалгах нүдийг идэвхгүй болгосон

Идэвхгүй болгосон нүд

Идэвхгүй болгосон тэмдэглэгээний нүд

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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>

Радио

Өгөгдмөл радио

Сонгосон радио

html

<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>

Идэвхгүй

Радио идэвхгүй болсон

Шалгасан радио идэвхгүй болсон

html

<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шинж чанарыг дэмждэг.

Өгөгдмөл шилжүүлэгчийг шалгах хайрцагны оролт

Шалгасан сэлгэх хайрцагны оролт

Шилжүүлэгчийн сонголтыг идэвхгүй болгосон

Шалгасан шилжүүлэгчийн нүдийг оруулахыг идэвхгүй болгосон

html

<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.

Өгөгдмөл хайрцаг

Идэвхгүй болгосон нүд

html

<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>

Өгөгдмөл радио

Хоёр дахь үндсэн радио

Радио идэвхгүй болсон

html

<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.

3 (идэвхгүй)

html

<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>

3 (идэвхгүй)

html

<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-reverse.

Урвуу шалгах нүд

Урвуу талбарыг идэвхгүй болгосон

Урвуу шилжүүлэгчийн нүдийг оруулах

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Шошгогүй

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

html

<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>

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

Нэг унтраалга

html

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

Шалгасан

html

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

Идэвхгүй

html

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Харааны хувьд эдгээр шалгах нүдийг асаах товчлуурууд нь залгаас солих товчлууруудтай ижил байна . Гэсэн хэдий ч тэдгээрийг туслах технологиор өөр өөрөөр дамжуулдаг: шалгах нүдийг сэлгэхийг дэлгэц уншигчид "шалгасан"/"шалгагдаагүй" гэж зарлах болно (учир нь тэдгээр нь гадаад төрхийг үл харгалзан тэдгээр нь үндсэндээ тэмдэглэгээ хэвээр байна), харин товчлуурын залгаасыг солих товчлуурууд нь "товчлуур"/"товч дарагдсан" гэж зарласан. Эдгээр хоёр аргын хоорондох сонголт нь таны үүсгэж буй сэлгэгчийн төрлөөс шалтгаална, мөн унтраалга нь шалгах хайрцаг эсвэл бодит товчлуур гэж зарлахад хэрэглэгчдэд ойлгомжтой байх эсэхээс хамаарна.

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

Шалгасан Радио Идэвхгүй Радио

html

<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, тухайлбал янз бүрийн тодорхойлсон хэв маягийг дэмждэг.

Нэг унтраалга
Шалгасан
Амжилттай радио шалгасан Аюултай радио

html

<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 10 3 3 6-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;