用于填充输入字段的复选框 onclick 功能答案

【问题标题】：Checkbox onclick function for filling input field用于填充输入字段的复选框 onclick 功能
【发布时间】：2011-09-13 05:57:01
【问题描述】：

我的注册表单中有“输入日期”文本输入字段。无论如何，将复选框“今天”放在输入字段“日期”附近并填写当前日期，取消勾选？ P.S 格式必须是 DD.MM.YYYY

【问题讨论】：

您在“取消勾选时清除”时应该小心——您不会知道用户在选择“今天”后是否更改了值，除非您专门为此编写代码。例如，用户可以单击“今天”，然后将日期更改为“+1”以快速获得“明天”。在这种情况下，“今天”的复选框仍将被选中，日期不会是“今天”。然后，如果用户清除该复选框，他们的日期将被完全删除。不好！

标签： jquery html date checkbox

【解决方案1】：

假设您的复选框具有 id="todayBox" 并且您的日期字段具有 id="enterDate"，您将使用以下 jQuery 代码：

$("#todayBox").change(function() {
    var dateStr;
    if (this.checked) {
        var now = new Date();
        dateStr = now.getDate() + "." + (now.getMonth() + 1) + "." + now.getFullYear();
    } else {
        dateStr = "";
    }
    $("#enterDate").val(dateStr);
});

您可以在这里看到它的实际效果：http://jsfiddle.net/jfriend00/d3t5Z/。

【讨论】：

如果可能，请在 jsfiddle 上创建工作示例。以及如何清除？
我将代码更改为复选框，现在我有一个显示它的 jsFiddle。我很难理解你的问题。下次如果包含 HTML 就很容易理解了。
来吧。如果日期或月份字符串的长度只有一个字符，您就不能完成最后一部分并弄清楚如何添加前导零吗？我们不是在这里为您写下每一个细节。我们已经向您展示了如何做到这一点，并为您提供了一个工作示例，并向您展示了如何管理复选框并展示了如何格式化日期。向我们表明您愿意自己做一些工作。如果您对如何在尝试后添加前导零有一个诚实的问题，那么您可以提出这个问题并告诉我们您尝试了什么。
另外，您的问题没有明确说明您想要前导零，因为 DD.MM.YYYY 并不总是意味着需要前导零。有时，它只是用来显示你想要的日月年。
你在说什么？现在是 13.9.2011

【解决方案2】：

$(document).ready(function() {

  $("#Today").click(GetDate);

});

function GetDate() {
 if (formatted_date == null) {
  var d = new Date();
  var formatted_date = d.getDate() + "-" + d.getMonth() + "-" + d.getFullYear());
  $("#DateTextBoxID").val(formatted_date);
 }
 else {
  $("#DateTextBoxID").val("");
 }
}

【讨论】：

工作示例绝对不需要回答。如果作者提供它们很好，但您应该准备将它们的示例应用到您自己的代码中，尤其是在像这样的简单案例中。
我目前没有 jsfiddle 帐户

【解决方案3】：

复选框感觉不适合对此进行控制。如果您使用的是 HTML5，我建议使用 command 元素，否则建议使用 <button type="button"> 元素。无论哪种方式，给它一个类，然后通过该类附加一些javascript。使用属性将按钮/命令元素链接到日期字段并不是一个坏主意——rel="" 通常用于此目的，即使它不是其预期目的。以这种方式链接这两者将允许您在同一页面上拥有多个日期字段和“今天”控件，而无需对它们的名称进行硬编码。

HTML 如下所示：

<label for="dateOfBirth">Date of birth</label>
<input type="text" id="dateOfBirth" name="dateOfBirth"/>
<button type="button" class="setDateToday" rel="dateOfBirth">Today</button>

还有 jQuery 的 javascript：

$(function(){
   $('button.setDateToday').click(function(){
      //Format today's date:
      var today = new Date(),
          todayFormat = today.getDay() + '.' + today.getMonth() + '.' + today.getFullYear();

      //Find the input indicated by the rel attribute and set the value
      $('#' + $(this).attr('rel')).val(todayFormat);
   });
});

您不应该“清除复选框中的日期”的原因是用户可能已经按下“今天”，然后更改了日期。清除值很可能会撤销他们的工作。复选框本身并不能非常清楚地指示您选中它时会发生什么 - 而一个按钮清楚地表明当您单击时将执行一些操作。

【讨论】：