Javascript 使用jQuery操作复选框

HTML:

嘿，我如何操作复选框，以便在选中“绿色”时将主体的背景色变为绿色，对红色执行相同的操作，并且在选中两者时，选择绿色作为背景。此外，是否可以仅在单击“自定义”按钮时标记复选框并应用更改？

只需使用

.on（）

将事件添加到所有

输入[type=checkbox]

，然后检查绿色是否选中？如果是，则将主体设置为绿色，如果不是，则检查是否单击了红色？如果是，则设置为红色；如果不是，则设置为无。（您可以在两行代码中执行此操作）

$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。在（'change'，function（）上{
变量bgColor=$（'绿色'）。is（'勾选'）？'绿色'：$（'红色'）。is（'勾选'）？'红色'：''；
$（'body'）.css（'background-color'，bgColor）；
});
});

在右边显示新闻


在左边显示新闻


设置背景色


显示绿色


显示红色


定制检查这是否适合您

您需要将事件处理程序附加到复选框以使其正常工作。请检查下面修改的代码

我已经按照要求修改了代码。通过这种方式，即使您添加了更多不同颜色的复选框，您也将获得所需的输出，并且绿色将具有较高的优先级

var bgColor = $('#green').is(':checked') ? 'green' : $('#red').is(':checked') ? 'red' : '';
 $('body').css('background-color', bgColor);

你可以这样做。但如果选中这两个复选框，则会出现问题。所以你应该选择单选按钮


$（文档）.ready（函数（）{
//单击按钮时，使用“名称”属性获取所选复选框
$（“#自定义”）。单击（函数（）{
//获取复选框的值
var checkedRadio=$（'input[name=“color_scheme”]：checked'）.val（）；
//添加颜色
$（'body'）.css（'background-color'，checkedRadio）；
})
});

在右侧显示新闻

在左侧显示新闻

设置背景色

显示绿色

显示红色

定制试试这个


$（文档）.ready（函数（）{
$（'input[type=checkbox]'）。在（'change'，function（）上{
var bg='white'；//默认颜色为白色
如果（$（'#绿色'）。为（':checked'）{//如果绿色为选中状态，则将背景显示为绿色
bg=‘绿色’；
}else if（$（'#red'）。为（':checked'）{//else red
bg=‘红色’；
}
$（'body'）.css（'background-color'，bg）；
});
});

在右边显示新闻


在左边显示新闻


设置背景色


显示绿色


显示红色


定制试试这个。
我希望它能帮助你，因为它可能完全符合你的要求

$(document).ready(function() {
$("input[name='color_scheme']").on("change", function() {

    if (this.checked && $("input[name='color_scheme']:checked").length == 1) {
        $('body').css('background-color', $(this).val());
    } else if ((this.checked && this.value === 'green') || $("input[name='color_scheme']:checked").length > 1) {
        $('body').css('background-color', 'green');
    } else if (!this.checked && $("input[name='color_scheme']:checked").length == 1) {
        $('body').css('background-color', $("input[name='color_scheme']:checked").val());
    } else {
        $('body').css('background-color', '');
    }

});
});

JSFIDLE同样适用
HTML：

$(document).ready(function() {
    $("#btnCustomize").on("click", function(){
        if($('#green').prop('checked') == true){
            $('body').css('background-color', 'green');
        }else if($('#red').prop('checked') == true){
            $('body').css('background-color', 'red');
        }else {
            $('body').css('background-color', '');
        }
    });
});

我认为您应该在这里使用
CSS选择器的功能。不要使用
JS/jQuery
尽可能地操纵
CSS
，这会让你的生活更轻松。相信我

HTML

$(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    if($('#red').is(':checked')){
       if($('#green').is(':checked')){
          $('body').css('background-color', 'green');
       }else{
          $('body').css('background-color', 'red');
       }
    }else if($('#green').is(':checked')){
       $('body').css('background-color', 'green');
    }else{
       $('body').css('background-color', '#ffffff');
    }
  });
});

JS

<label>
    <input type="checkbox" data-color="green">Green
</label>
<label>
    <input type="checkbox" data-color="red">Red
</label>
<p>
    <button type="button">Customize</button>
</p>

body.red {
    background-color: red;
}

body[class*=green] {
    background-color: green;
}

好的，但如果两者都选中，则必须为绿色。如果没有一个被勾选为白色，那么它就不起作用了。我需要能够选中两个框，在这种情况下，绿色优先于红色
$(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    if($('#red').is(':checked')){
       if($('#green').is(':checked')){
          $('body').css('background-color', 'green');
       }else{
          $('body').css('background-color', 'red');
       }
    }else if($('#green').is(':checked')){
       $('body').css('background-color', 'green');
    }else{
       $('body').css('background-color', '#ffffff');
    }
  });
});

<label>
    <input type="checkbox" data-color="green">Green
</label>
<label>
    <input type="checkbox" data-color="red">Red
</label>
<p>
    <button type="button">Customize</button>
</p>

body.red {
    background-color: red;
}

body[class*=green] {
    background-color: green;
}

$('button').on('click', function() {
    $('input').each(function() {
        var $this = $(this);
        $('body').toggleClass($this.data('color'), $this.is(':checked'));
    });
});