如果单选按钮检查更改父div(li)背景 - javascript [英] If radio button checked change parent div (li) background - javascript
本文介绍了如果单选按钮检查更改父div(li)背景 - javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有单选按钮里面的li元素,
我想改变li(父div)一旦选中单选按钮的背景颜色。我成功地通过CSS设置悬停在李,但它看起来像:checked不工作在父div。
这是我的html + css代码:
I have radio button inside li element, I would like to change the background color of the li (the parent div) once the radio button checked. I succeeded to set hover on the li by CSS, but it seems like the :checked not works on parent div. This is my html + css code:
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category"><label class="selectit"><input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label></li>
<li id="job_listing_category-73"><label class="selectit"><input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label></li>
<li id="job_listing_category-75"><label class="selectit"><input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label></li>
<li id="job_listing_category-76"><label class="selectit"><input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label></li>
<li id="job_listing_category-80"><label class="selectit"><input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label></li>
<li id="job_listing_category-86"><label class="selectit"><input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label></li>
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label></li>
</ul>
</div>
关于此问题的任何帮助,
感谢
I will appreciate any help about this issue, Thanks
推荐答案
这应该可以:
function updateHighlightRadio() {
var selected = this.parentNode.parentNode.parentNode.getElementsByClassName("selected")[0];
if (selected) selected.className = selected.className.replace(" selected", "");
this.parentNode.parentNode.className += " selected";
}
function updateHighlightCheckbox() {
var selected = this.parentNode.parentNode;
if (!this.checked)
selected.className = selected.className.replace(" selected", "");
else
this.parentNode.parentNode.className += " selected";
}
window.onload = function () {
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0; i < radios.length; ++i) {
radios[i].onchange = updateHighlightRadio;
}
var checkboxes = document.querySelectorAll("input[type=checkbox]");
for (var i = 0; i < checkboxes.length; ++i) {
checkboxes[i].onchange = updateHighlightCheckbox;
}
}
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
.job-manager-term-checklist .selected {
background-color: #a2156b;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
这篇关于如果单选按钮检查更改父div(li)背景 - javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文