Javascript 选中复选框时将字体大小更改为粗体

在这些

输入

和

标签

元素上执行一些自定义css以设置复选框的样式。当用户单击复选框时，我尝试

加粗

字体重量，如果再次单击切换框，则切换

常规

。在这个问题上，双关语是有意的

$（函数（）{
var作用=1；
$（'.control--checkbox input'）。打开（“单击”，goBold）；
函数goBold（）{
如果（操作==1）{
字体权重（“粗体”）；
行动=2；
}否则{
恒重（“400”）；
作用=1；
}
}
功能重量（val）{
$（'.control--checkbox'）.css({
容重：val
})
}
});
。对照组{
显示：内联块；
垂直对齐：顶部；
}
.对照组{
显示：块；
位置：相对位置；
光标：指针；
字号：18px；
左侧填充：30px；
利润率：15px0；
}
.控制组.控制输入{
位置：绝对位置；
z指数：-1；
不透明度：0；
}
.控制组.控制指示器{
位置：绝对位置；
顶部：2个；
左：0；
高度：20px；
宽度：20px；
背景：白色；
}
.控制组.控制--收音机.控制指示灯{
边界半径：50%；
边框：1px实心#ccc；
}
.控制组.控制：悬停输入~.控制指示器，
.控制组.控制输入：焦点~.控制指示器{
背景：#fff；
}
.控制组.控制输入：选中~.控制指示器{
背景：#fff；
}
.控制组。控制指示器：后{
内容：''；
位置：绝对位置；
显示：无；
}
.控制组.控制输入：选中~.控制指示器：之后{
显示：块；
}
.control group.control--复选框{
字体大小：400；
字体大小：14px；
}
.控制组.控制--收音机.控制指示灯：后{
左：4px；
顶部：4px；
高度：10px；
宽度：10px；
边界半径：50%；
背景：绿色；
}
.control group.control--checkbox.control\u指示符：之后{
左：6px；
排名：0；
宽度：7px；
高度：14px；
边框：实心#fff；
边框宽度：0 2px 2px 0；
变换：旋转（45度）；
}
.control group.control--复选框输入：选中~.control\u指示符{
背景颜色：绿色；
边框：1px纯绿色；
}
.control group.control--复选框输入：禁用~.control\u指示器：之后{
边框颜色：#7b；
}
.control group.control--复选框输入：禁用~.control\u指示器：之后{
边框颜色：#7b；
}
.control group.control--checkbox.control\u指示符{
边框：1px实心#ccc；
排名：0；
盒影：1px1px1px1pxrgba（0,0,0,0.1）；
}

操作系统
苹果iOS（42）
安卓（20）
窗口（8）
试试这个

$(function() {

   $('.control--checkbox input').on("change", function() {
    if ($(this).data('isbold')) {
      $(this).parent().css('font-weight', 'normal') 
      $(this).data('isbold', false)
    } else {
      $(this).parent().css('font-weight', 'bold')
      $(this).data('isbold', true)
    }
  });

});

试试这个

$(function() {

   $('.control--checkbox input').on("change", function() {
    if ($(this).data('isbold')) {
      $(this).parent().css('font-weight', 'normal') 
      $(this).data('isbold', false)
    } else {
      $(this).parent().css('font-weight', 'bold')
      $(this).data('isbold', true)
    }
  });

});

操作
检查是不必要的。您可以使用
event.target.checked
检查它们是否被检查，它将返回
true
或
false
值


$（函数（）{
$（'.control--checkbox input'）。打开（“change”，goBold）；
函数goBold（事件）{
if（event.target.checked）{
fontWeight（$（此），“粗体”）；
}否则{
fontWeight（$（本），“400”）；
}
}
功能重量（元素，val）{
element.parent（）.css（{fontwweight:val}）
}
});
。对照组{
显示：内联块；
垂直对齐：顶部；
}
.对照组{
显示：块；
位置：相对位置；
光标：指针；
字号：18px；
左侧填充：30px；
利润率：15px0；
}
.控制组.控制输入{
位置：绝对位置；
z指数：-1；
不透明度：0；
}
.控制组.控制指示器{
位置：绝对位置；
顶部：2个；
左：0；
高度：20px；
宽度：20px；
背景：白色；
}
.控制组.控制--收音机.控制指示灯{
边界半径：50%；
边框：1px实心#ccc；
}
.控制组.控制：悬停输入~.控制指示器，
.控制组.控制输入：焦点~.控制指示器{
背景：#fff；
}
.控制组.控制输入：选中~.控制指示器{
背景：#fff；
}
.控制组。控制指示器：后{
内容：''；
位置：绝对位置；
显示：无；
}
.控制组.控制输入：选中~.控制指示器：之后{
显示：块；
}
.control group.control--复选框{
字体大小：400；
字体大小：14px；
}
.控制组.控制--收音机.控制指示灯：后{
左：4px；
顶部：4px；
高度：10px；
宽度：10px；
边界半径：50%；
背景：绿色；
}
.control group.control--checkbox.control\u指示符：之后{
左：6px；
排名：0；
宽度：7px；
高度：14px；
边框：实心#fff；
边框宽度：0 2px 2px 0；
变换：旋转（45度）；
}
.control group.control--复选框输入：选中~.control\u指示符{
背景颜色：绿色；
边框：1px纯绿色；
}
.control group.control--复选框输入：禁用~.control\u指示器：之后{
边框颜色：#7b；
}
.control group.control--复选框输入：禁用~.control\u指示器：之后{
边框颜色：#7b；
}
.control group.control--checkbox.control\u指示符{
边框：1px实心#ccc；
排名：0；
盒影：1px1px1px1pxrgba（0,0,0,0.1）；
}

操作系统
苹果iOS（42）
安卓（20）
窗口（8）
无需执行
操作
检查。您可以使用
event.target.checked
检查它们是否被检查，它将返回
true
或
false
值


$（函数（）{
$（'.control--checkbox input'）。打开（“change”，goBold）；
函数goBold（事件）{
if（event.target.checked）{
fontWeight（$（此），“粗体”）；
}否则{
fontWeight（$（本），“400”）；
}
}
功能重量（元素，val）{
element.parent（）.css（{fontwweight:val}）
}
});
。对照组{
显示：内联块；
垂直对齐：顶部；
}
.对照组{
显示：块；
位置：相对位置；
光标：指针；
字号：18px；
衬垫