Javascript 如何基于onclick更改输入字段背景色？

我想根据性别选择更改输入字段背景颜色

到目前为止，我已经：

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

<script>
 $(document).ready(function(){
   $("#male").click(function(){
    $("#gender").css("backgroundColor:#0000FF");
 }); 
</script> 

<script>
 $(document).ready(function(){
   $("#female").click(function(){
    $("#gender").css("backgroundColor:#FFC0CB");
 }); 
</script> 

<form>
 <label for="gender">Gender:</label>
 <select id="gender" name="gender">
   <option value="male" selected>Male</option>
   <option value="female">Female</option>
 </select><br>
</form>

$（文档）.ready（函数（）{
$（“#男”）。单击（函数（）{
$（“#性别”）.css（“背景色：#0000FF”）；
}); 
$（文档）.ready（函数（）{
$（“#女性”）。单击（函数（）{
$（“#性别”）.css（“背景色：#FFC0CB”）；
}); 
性别：
男性
女性

---

这不起作用

您可以使用这是一个JavaScript函数，并像这样使用

onchange=

调用它

功能更改颜色（el）{
如果（el.value==“男性”）
{
document.body.style.backgroundColor=“#0000FF”；
}
如果（el.value==“女性”）
{
document.body.style.backgroundColor=“#FFC0CB”；
}
}

性别：
--选择一个选项--
男性
女性


元素跨浏览器上不支持事件

您希望使用select的change事件，然后根据新值有条件地设置颜色

还要注意，您的
css（）
语法不太正确


$（“#性别”）.change（函数（）{
const color=this.value==‘女性’？‘FFC0CB’：‘0000FF’；
$（this.css（'backgroundColor'，color）
})；

性别：
男性
女性


使用
$（#性别选项：selected）.val（）获取当前的选项：selected值。val（）
然后使用elements标记选择器进行设置。在更改函数中，您可以使用
$（this）
访问元素。使用一个条件查看它是否设置为
$（this）。val（）==“男性”
==>
$（this）.css（“背景色”、“浅蓝色”）
如果未默认设置为女性
$（this）.css（“背景色”、“粉色”）
，因为这是您唯一的其他选项


$（文档）.ready（函数（）{
$（“#性别选项：选中”）.val（）==“男性”？$（“#性别”）.css（“背景色”、“浅蓝色”）：$（“#性别”）.css（“背景色”、“粉色”）
$（“#性别”）。改变（职能（e）{
$（this.val（）===“男性”？$（this.css（“背景色”、“浅蓝色”）：$（this.css（“背景色”、“粉色”）
})
})

性别：
男性
女性


Huh？OP希望在中选择性别而不是颜色。任意更改选项值以适合您的代码不会使sense@charlietfl哦，我明白了，好的，我已经更新了我的代码