如何使用 jQuery 从隐藏的 csv 字段填充一系列复选框

发布于 2024-09-16 06:33:27 字数 627 浏览 5 评论 0原文

我有一个带有一堆复选框的表单，以及一个包含 CSV 数据的隐藏字段。基本上，我需要根据隐藏字段的值勾选复选框：

<form>

    <input type="checkbox" id="01" name="01" />
    <input type="checkbox" id="02" name="02" />
    <input type="checkbox" id="03" name="03" />

    <input type="hidden" value="03,01," />

</form>

因此，在上面的示例中，当页面加载完成时需要勾选复选框 01 和 03。我还需要确保当复选框的值发生变化时，隐藏的 CSV 字段也会发生变化（尽管这也许可以在表单提交时完成？）。

我有限的 jQuery 知识对此一无所知，任何帮助将不胜感激。（我知道其中一些最好在服务器端完成，但除了 javascript 之外我无法访问任何内容）。

下面的答案满足了我的大部分需求。我认为使用创建的变量，应该可以在表单提交时重新填充 CSV 字段。即，使用 selected_ids 将复选框的 id 添加到 CSV 的末尾（如果它们尚不存在）。这可以做到吗？

原文

I have a form with a bunch of checkboxes, and a hidden field that contains CSV data. Basically, I need the checkboxes to be ticked based on the value of the hidden field:

<form>

    <input type="checkbox" id="01" name="01" />
    <input type="checkbox" id="02" name="02" />
    <input type="checkbox" id="03" name="03" />

    <input type="hidden" value="03,01," />

</form>

So, in the example above checkboxes 01 and 03 need to be ticked when the page has finished loading. I also need to ensure that when the value of the checkboxes changes, so too does the hidden CSV field (though this could perhaps be done when the form submits?).

My limited jQuery knowledge has got me nowhere with this, any help would be much appreciated. (I know that some of this would be best done server-side, but I have no access to anything but javascript).

The answer below does most of what I want. I think that using the variables created, it should be possible to re-populate the CSV field when the form submits. ie, using selected_ids to add the ids of the checked boxes onto the end of the CSV (if they aren't already present). Can this be done?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雪化雨蝶 2024-09-23 06:33:27

var csvValue = $('#csv-input').val();
var selected_ids = csvValue.split(',');
for (var i = 0; i < selected_ids.length; i++)
{
    var selected_id = selected_ids[i];
    $('#' + selected_id).attr('checked', 'checked');
}

var csvValue = $('#csv-input').val();
var selected_ids = csvValue.split(',');
for (var i = 0; i < selected_ids.length; i++)
{
    var selected_id = selected_ids[i];
    $('#' + selected_id).attr('checked', 'checked');
}

回复收藏 0 原文

嗫嚅 2024-09-23 06:33:27

$(':checkbox').bind('change', function(event){
    if (this.checked == true){
      // add to hidden field
      var tempIdStr = $('#cvs-input').val();
      // if not in hidden value already
      if (tempIdStr.indexOf(this.id) > -1){
          tempIdStr += "id,"; // or ", id" depending on how you are seperating the ids
         $('#cvs-input').val(tempIdStr);
      }
    } else {
    // remove from hidden field
      var tempIds = $('#cvs-input').val().split(',');
      var index = tempIds.indexOf(this.id);
      if (index > -1){
          tempIds.splice(index, 1);
          $('#cvs-input').val(tempIds.join(',');
    }
});

$(':checkbox').bind('change', function(event){
    if (this.checked == true){
      // add to hidden field
      var tempIdStr = $('#cvs-input').val();
      // if not in hidden value already
      if (tempIdStr.indexOf(this.id) > -1){
          tempIdStr += "id,"; // or ", id" depending on how you are seperating the ids
         $('#cvs-input').val(tempIdStr);
      }
    } else {
    // remove from hidden field
      var tempIds = $('#cvs-input').val().split(',');
      var index = tempIds.indexOf(this.id);
      if (index > -1){
          tempIds.splice(index, 1);
          $('#cvs-input').val(tempIds.join(',');
    }
});

回复收藏 0 原文

~没有更多了~