Question

我正在使用Asp.Net CheckBoxList控件，并且在li元素内有很多复选框。如果要选中li元素的背景颜色，我想更改它的背景颜色。我用css和jquery尝试了很多东西，但是我做不到。

注意：当我单击复选框时，下面给出的一些答案有效。但是，当页面回发时，复选框将变为默认视图。

<ul id="ContentPlaceHolder1_CheckBoxList1">
	<li><input id="c1" type="checkbox" name="c1" value="57" /><label for="c1">aaaaaaaaa</label></li>
	<li><input id="c2" type="checkbox" name="c2" value="94" /><label for="c2">bbbbbbbbbb</label></li>
	<li><input id="c3" type="checkbox" name="c3" value="121" /><label for="c3">cccccccccc</label></li>
  
  </ul>

我的一些尝试：

<!-- 1  -->
var ccc = function () {
            $("input:checked").parent("li").css({"color": "white", "background-color": "blue"});
        };
        
        ccc();

        $( "input[type=checkbox]" ).on( "click", ccc );
        
        
        <!-- 2  -->
        $(":checkbox").click(function(){
   $(":checked").parent().css({"color": "white", "background-color": "blue"});
});

/*1*/
li < input[type=checkbox]:checked {
        background-color:aqua;
    }
    
    /*2*/
    li:has( input[type="checkbox"]:checked) {
    background: #000;
    border-color: green;
    color: white;
}

Answer 1

使用jquery is() 函数和elem.closest()函数。您可以使用更改事件根据输入条件添加或删除类

$(document).on('change','#ContentPlaceHolder1_CheckBoxList1 input[type=checkbox]',function(){
   if($(this).is(':checked')){
     $(this).closest('li').addClass('checked_class')
   }else{
     $(this).closest('li').removeClass('checked_class')
   }
})

.checked_class{
 border:1px solid red;
 /*add your desgin properties*/
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ContentPlaceHolder1_CheckBoxList1">
  <li>
  <input id="c1" type="checkbox" name="c1" value="57" />
  <label for="c1">aaaaaaaaa</label>
  </li>
  <li><input id="c2" type="checkbox" name="c2" value="94" /><label for="c2">bbbbbbbbbb</label></li>
  <li><input id="c3" type="checkbox" name="c3" value="121" /><label for="c3">cccccccccc</label></li>

</ul>

Answer 2

您想听复选框的A=randn(1000,1); [f,x]=ksdensity(A); plot(x,f, ':k') hold on line([0 0],[0 1]) hold off ylim([0 max(f)]) % <--- sets the y-axis limits based on output from ksdensity事件，然后定位父元素（import schedule import time def job(): print("I'm working...") schedule.every(10).minutes.do(job) schedule.every().hour.do(job) schedule.every().day.at("10:30").do(job) while 1: schedule.run_pending() time.sleep(1)）。下面的示例仅使用$.css()来更改change的背景。您可以使用.addClass("className")添加一个类。

编辑：我已经更新了我的答案，现在您需要进行负载行为。

以下代码使用arrow functions使用ES6样式函数定义。它使用2个参数（id，isChecked）并相应地更新css。 li函数使用与li块等效的三元运算符。

toggleStyle

if{} else{}

Answer 3

使用香草javascript，您可以执行以下操作。使用change事件侦听器，可以检查该复选框是否已选中。如果评估结果为true，则表示它已被用户检查。在这种情况下，您可以通过使用元素上的parentNode对象来获取其父元素。

const inputs = document.querySelectorAll('input');
const color = ['blue', 'red', 'yellow'];
inputs.forEach((input, index) => {
  input.addEventListener('change', function(){
    if(this.checked){
      this.parentNode.style.background = color[index]
    }
  })
})

Answer 4

使用常规Javascript：

window.onload = function a() {
	document.querySelectorAll("li").forEach(function(e) {
		if (e.children[0].checked == true) e.style.backgroundColor = "green";
		else e.style.backgroundColor = "";
		e.onchange = a;
	})
}

<ul id="ContentPlaceHolder1_CheckBoxList1">
    <li><input id="c1" type="checkbox" name="c1" value="57" /><label for="c1">aaaaaaaaa</label></li>
    <li><input id="c2" type="checkbox" name="c2" value="94" /><label for="c2">bbbbbbbbbb</label></li>
    <li><input id="c3" type="checkbox" name="c3" value="121" /><label for="c3">cccccccccc</label></li>
</ul>

Answer 5

谢谢大家。我以您的方式解决了这个问题（混合您的答案）。我使用了两个功能。其中之一正在处理页面加载并控制所有复选框（无论是否选中），而另一项则在复选框更改时起作用。

             $(document).ready(function () {


                 $("input").each(function (index) {

                     if ($(this).is(':checked')) {
                         $(this).parent().css('background-color', 'blue');
                     }
                     else {
                         $(this).parent().css('background-color', '#eee');
                     }

                 });


             });

             $('#ContentPlaceHolder1_CheckBoxList1 input[type=checkbox]').on('change', function () {
                 if ($(this).is(':checked')) {
                     $(this).parent().css('background-color', 'blue');
                 }
                 else {
                     $(this).parent().css('background-color', '#eee');
                 }
             });

如何更改已选中复选框的父元素的样式

5 个答案: