jQuery开发ToDo List时优先级Checkbox返回'on'、分类Radio二次取值为空

1. 优先级取值始终返回'on' #

• 该问题由取值逻辑错误直接导致：
  • 当前代码var $importance = $('<input type="checkbox" name="importance"/>').val() 是动态创建了一个未挂载到页面DOM的全新复选框，和用户在页面上实际勾选的两个优先级选项完全没有关联
  • 该临时创建的复选框没有自定义value属性，浏览器对无value属性的复选框默认返回值就是on，因此无论页面上的用户操作是什么，这行代码永远只会返回'on'
  • 页面上真实的两个优先级复选框并未设置统一的name="importance"属性（两个真实复选框的name分别为important和unimportant，仅class是统一的importance），就算放开之前注释掉的按name取值的代码，也无法匹配到任何真实元素
• 正确的取值逻辑：选中页面上所有带importance类、处于勾选状态的真实复选框：

  // 替换原有错误代码
  var $importance = $("input.importance:checked").val() || "未设置优先级";
  

2. 分类单选框从第二次点击开始取值为空 #

• 该问题由全量清空输入的逻辑副作用导致：
  • 第一次点击添加按钮时，代码先执行分类值的获取逻辑，此时单选框的原生value还是正常的（Grocery/Work/Chores/Finance），因此可以正常取值
  • 取值完成后执行的$("input").val("") 会遍历页面上所有input元素，把它们的value属性强制改成空字符串——包括所有分类单选框的原生value也被覆盖成了空
  • 后续再次点击添加按钮时，即使切换了单选选项，选中元素的value早就被上一次的清空操作覆盖为空，因此取值永远返回空
• 修复方法：不要用全量选择器执行清空操作，仅清空文本类输入框，不触碰单选框、复选框的原生value属性：

  // 替换原有全量清空代码
  // 仅清空文本类输入
  $("input[type='text']").val("");
  // 手动取消优先级复选框的选中状态，避免下次添加任务时残留
  $("input.importance").prop("checked", false);
  

• 注意：对单选框/复选框调用.val("")只会修改它们的value属性，不会改变选中状态，因此才会出现“选中状态正常，但值被清空”的异常表现

修复后可直接运行的核心逻辑 #

var $addButton = $(".btn-primary");
var $doneList = $(".completed");

// 绑定添加任务事件
$addButton.on("click", function(){
  // 组装任务数据
  var taskInfo = {
    sort: $(".sort").val(),
    taskName: $(".newTask").val(),
    taskDescr: $(".taskDescr").val(),
    taskDate: $(".taskDate").val(),
    category: $("input[type='radio'][name='category']:checked").val(),
    importance: $("input.importance:checked").val() || "普通优先级"
  };

  var taskContent = Object.values(taskInfo).join(", ");
  var $todoList = $(".uncompleted");
  
  // 追加新任务到待办列表
  $todoList.append(
    `<li>${taskContent}
      <button class="btn btn-success"><span class="glyphicon glyphicon-ok"> Done</span></button>
      <button class="btn btn-danger"><span class="glyphicon glyphicon-remove"> Remove</span></button>
    </li>`
  );
  
  // 安全清空输入区域，不破坏单选/复选框的原始属性
  $("input[type='text']").val("");
  $("input.importance").prop("checked", false);
});

// 绑定任务标记完成事件
$(".uncompleted").on("click", ".btn-success", function(){
  var $currentTask = $(this).parent("li");
  // 提取任务文本，移除按钮内容
  var taskText = $currentTask.clone().children().remove().end().text().trim();
  $currentTask.remove();
  // 追加到已完成列表
  $doneList.append(
    `<li>${taskText}
      <button class="btn btn-danger"><span class="glyphicon glyphicon-remove"> Remove</span></button>
    </li>`
  );
});

补充说明：原有全量清空input的逻辑不仅会导致分类取值异常，还会破坏日期输入等带格式的输入框值，限定清空范围的逻辑稳定性更高。

内容的提问来源于stack exchange，提问作者irobot