沒有輸入標記的CSS複選框onclick，純JS

我想在不使用html <input>標記的情況下創建一個功能CSS複選框，但要努力做到這一點。有人可以檢查我出錯的地方嗎？沒有輸入標記的CSS複選框onclick，純JS

var cbElement = document.getElementsByClassName("checkbox1"); 
 

 
cbElement.addEventListener("click", function() { 
 
    var checkbox = document.getElementsByClassName("check"); 
 

 
    if (checkbox.style.visibility == "hidden") { 
 
    document.getElementByClassName("check").style.visibility = "visible"; 
 
    } else if (checkbox.style.visibility == "visible") { 
 
    document.getElementsByClassName("check").style.visibility = "hidden"; 
 
    } 
 
});

.checkbox1 { 
 
    border: 1px solid black; 
 
    height: 10px; 
 
    width: 10px; 
 
    display: inline-block; 
 
} 
 

 
.check { 
 
    visibility: hidden; 
 
    color: black; 
 
}

<span class="checkbox1"> 
 
    <i class="check"></i> 
 
</span> 
 

 
<span class="checkbox1"> 
 
    <i class="check"></i> 
 
</span>

來源

2016-12-02 Bongskie

你爲什麼要接受來自用戶的輸入沒有形式和控制（即輸入）？ – Esko

您無法將事件偵聽器添加到HTML集合中，您必須將目標設爲元素：http://stackoverflow.com/questions/27834226/add-event-listener-to-collection-of-html-elements – sinisake

@Esko，沒有真正的原因，我只是學習，並試圖做不同的事情 – Bongskie

這裏是一個純粹的JS解決方案 - 一些指針：

getElementsByClassName返回HTMLElement列表
切換一個class名字是EASI呃比編輯風格
的check元素必須給予background而不是color得到檢查的感覺。

請參見下面的演示：

var cbElements = document.getElementsByClassName("checkbox1"); 
 

 
for (var i = 0; i < cbElements.length; ++i) { 
 
    cbElements[i].addEventListener("click", function() { 
 
    this.getElementsByClassName("check")[0].classList.toggle('active'); 
 
    }); 
 
}

.checkbox1 { 
 
    border: 1px solid black; 
 
    height: 10px; 
 
    width: 10px; 
 
    display: inline-block; 
 
    cursor:pointer; 
 
} 
 
.check { 
 
    visibility: hidden; 
 
    background: black; 
 
    display: block; 
 
    height: 100%; 
 
} 
 
.active { 
 
    visibility: visible; 
 
}

<span class="checkbox1"> 
 
    <i class="check">&nbsp;</i> 
 
</span> 
 

 
<span class="checkbox1"> 
 
    <i class="check">&nbsp;</i> 
 
</span>

來源

2016-12-02 10:51:44 kukkuz

我明白我做錯了什麼。謝謝！ – Bongskie

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 

<style> 
.checkbox{ 
    border: 1px solid black; 
    height: 10px; 
    width: 10px; 
    display: inline-block; 
} 
.checked{ 
    background:red; 
} 
</style> 

<span class="checkbox" id="chk_1"> 
    <i class="checked"></i> 
</span> 

<span class="checkbox" id="chk_2"> 
    <i class="check"></i> 
</span> 

<script> 

var cbElement = $(".checkbox"); 

$(cbElement).click(function(){ 
    var currentCb = $(this).attr('id') 
    if($("#"+currentCb).hasClass("checked")){ 
     $("#"+currentCb).removeClass("checked"); 
    }else { 
     $("#"+currentCb).addClass("checked"); 
    } 
}); 

</script>

來源

2016-12-02 10:46:58

OP沒有使用jQuery標籤，爲什麼你認爲他希望使用它？ – Roberrrt

正如Roberrt寫的，我希望沒有jQuery – Bongskie

因爲通過Plain JS實現這一點就像重新發明Wheel！不是嗎？ –

OOP風格的一個複選框類。您可以存儲對複選框實例的引用，以便在代碼中輕鬆訪問其「已檢查」屬性。也可以使用getter-setter定義「checked」屬性，以便在屬性更改時呈現複選框。

function Checkbox(elem) { 
 
    this.elem = elem; 
 
    this.checked = elem.dataset.checked; 
 
    
 
    // Extend your component: 
 
    // this.name = ... 
 
    // this.value = ... 
 
    // this.onchange = ... 
 

 
    elem.addEventListener('click', e => { 
 
    this.checked = !this.checked; 
 
    this.render(); 
 
    }); 
 
} 
 

 
Checkbox.prototype.render = function() { 
 
    this.elem.setAttribute('data-checked', this.checked); 
 
} 
 

 
function initCheckboxes(elems) { 
 
    for (let i = 0; i < elems.length; i++) { 
 
    new Checkbox(elems[i]); 
 
    } 
 
} 
 

 
initCheckboxes(document.querySelectorAll('.checkbox'));

.checkbox { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 15px; 
 
    width: 15px; 
 
    border: 1px solid; 
 
    cursor: pointer; 
 
} 
 
.checkbox:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    line-height: 100%; 
 
    text-align: center; 
 
} 
 
.checkbox[data-checked="true"]:after { 
 
    content: "✓"; 
 
}

<span class="checkbox"></span> 
 
<span class="checkbox" data-checked="true"></span>

來源

2016-12-02 11:58:42

沒有輸入標記的CSS複選框onclick，純JS

回答

相關問題