bootStrap checkbox的label内容取得
时间: 2023-06-25 21:06:15 浏览: 41
可以通过以下步骤获取Bootstrap复选框的标签内容:
1. 首先,获取复选框元素的引用,例如:
```html
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
Checkbox label
</label>
</div>
```
可以通过以下方式获取复选框元素的引用:
```javascript
const checkbox = document.querySelector('#checkbox1');
```
2. 然后,使用复选框元素的 `nextElementSibling` 属性获取标签元素的引用,例如:
```javascript
const label = checkbox.nextElementSibling;
```
3. 最后,使用标签元素的 `textContent` 属性获取标签内容,例如:
```javascript
const labelText = label.textContent;
console.log(labelText); // 输出 "Checkbox label"
```
相关问题
bootStrap checkbox的用法
Bootstrap checkbox可以使用以下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>
```
其中,`form-check-input`类用于指定输入元素,`form-check-label`类用于指定标签元素。`for`属性用于将标签与特定的输入元素关联起来,`id`属性指定此输入元素的唯一标识符。
可以添加`disabled`类来禁用复选框,也可以使用`checked`属性将复选框设置为初始选中状态。
如果需要水平排列多个复选框,可以使用`form-check-inline`类。
```
<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">Option 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">Option 2</label>
</div>
```
用js实现bootstrap复选框组合读取label文本
可以通过以下代码实现:
HTML:
```html
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
Option 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox3">
<label class="form-check-label" for="checkbox3">
Option 3
</label>
</div>
```
JS:
```javascript
var checkboxes = document.querySelectorAll('.form-check-input');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var checkedValues = [];
checkboxes.forEach(function(cb) {
var label = cb.nextElementSibling;
if (cb.checked) {
checkedValues.push(label.innerText);
}
});
console.log(checkedValues);
});
});
```
这段代码使用querySelectorAll从HTML中选择所有具有.form-check-input类的复选框,然后添加一个事件侦听器以侦听复选框的更改事件。每次复选框更改时,代码循环遍历所有复选框,如果它被选中,则获取其相邻的兄弟元素标签,并将标签的innerText添加到一个名为checkedValues的数组中。最后,它记录该数组。