如何通过点击特定的单选按钮

Question

改变div的颜色

大家在计算器社区

我尝试创建本地JavaScript的功能..... 我想改变的特定背景颜色invoice_wrapper格红，如果我按一下按钮radioyes或 绿色，如果我按一下按钮radiono

我想通过这个关键字做到这一点

我如何通过本地JavaScript做到这一点不是任何库，请

好运.....

<?php foreach($fetches AS $electricities): ?> 

<div class="invoice_wrapper"> 

<?php if($electricities->paid == "Yes"): ?> 

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>" checked> 
No: <input onclick="" class="radiono" type="radio" name="paid" value="No"> 

<?php else: ?> 

Yes: <input onclick="" class="radioyes" type="radio" name="paid" value="<?php echo $electricities->paid; ?>"> 
No: <input onclick="" class="radiono" type="radio" name="paid" value="No" checked> 

<?php endif; ?> 

</div> 

<?php endforeach; ?> 

Answer 1

• 使用querySelectorAll选择与指定的选择元素。
• :checked选择器最初只会选择checked元素来设置background。
• Array.from通过使用Array#forEach.
• classList.add/remove元素投Array-like-object到array
• 迭代与classes

var elems = document.querySelectorAll('.invoice_wrapper [type="radio"]'); 
 
var elemsInit = document.querySelectorAll('.invoice_wrapper [type="radio"]:checked'); 
 
var handler = function(elem) { 
 
    elem.parentNode.classList.remove('red', 'green'); 
 
    if (elem.value === 'Yes') { 
 
    elem.parentNode.classList.add('green'); 
 
    } else { 
 
    elem.parentNode.classList.add('red'); 
 
    } 
 
}; 
 
Array.from(elemsInit).forEach(handler); 
 
Array.from(elems).forEach(function(elem) { 
 
    elem.addEventListener('change', handler.bind(null, elem)); 
 
});

.invoice_wrapper { 
 
    border: 5px solid black; 
 
    margin: 5px; 
 
} 
 
.green { 
 
    background: green; 
 
} 
 
.red { 
 
    background: red; 
 
}

<div class="invoice_wrapper"> 
 
    Yes: 
 
    <input class="radioyes" type="radio" name="paid1" value="Yes" checked>No: 
 
    <input class="radiono" type="radio" name="paid1" value="No"> 
 
</div> 
 

 
<div class="invoice_wrapper"> 
 
    Yes: 
 
    <input class="radioyes" type="radio" name="paid2" value="Yes">No: 
 
    <input class="radiono" type="radio" name="paid2" value="No" checked> 
 
</div>