1. 问题相关背景:
在网页页面中想使用checkbox实现一个选项功能(当checkbox选中时会显示更多按钮,当checkbox取消选中时会取消显示),并且能够多次重复使用。
2. 问题代码:
在看过不少博客后我选择jQuery的.prop()实现相关功能,问题代码如下:
$("#checkBoxForWP").on('click', function changeEvent() {
if($("#checkBoxForWP").prop('checked', true)) {
$("#addWaypoint").css('visibility', 'visible');
$("#waypointSeMa").css('visibility', 'visible');
$("#waypointAdd").css('visibility', 'visible');
}
else{
$("#addWaypoint").css('visibility', 'hidden');
$("#waypointSeMa").css('visibility', 'hidden');
$("#waypointAdd").css('visibility', 'hidden');
}
});
3. 问题解析:
使用该代码存在一个问题,网页在render后checkbox起初处于“unchecked”状态,点击checkbox后也正常显示了相关需要显示的项。但当再次点击时,也无法更改回“unchecked”状态,一直处于“checked”。
4. 正确的代码:
为了解决这个问题,尝试了如下代码,将$("#checkBoxForWP").prop(‘checked’)作为判断条件。
$("#checkBoxForWP").on('click', function changeEvent() {
if($("#checkBoxForWP").prop('checked') == true) {
$("#addWaypoint").css('visibility', 'visible');
$("#waypointSeMa").css('visibility', 'visible');
$("#waypointAdd").css('visibility', 'visible');
}
else{
$("#addWaypoint").css('visibility', 'hidden');
$("#waypointSeMa").css('visibility', 'hidden');
$("#waypointAdd").css('visibility', 'hidden');
}
});