根据单个查询字符串填写几个复选框

时间:2017-12-20 21:13:39

标签: javascript jquery

我有一个视图,其中包含一些在数据库中存储某些值的表单。稍后我可以再次打开记录,它通过查询字符串将存储的值传递到同一视图中,填充字段。

适用于文本字段和下拉列表,但我无法对复选框进行相同的处理。问题是,它们必须在相同的js var中,在同一个数据库字段中,进入相同的查询字符串,然后再次进入复选框。



// for testing
function displayTest() {
    var contacts = $('input[name="fieldtotest"]:checked').map(function () {
        return this.value;
    }).get();
    $("#outputtest").val(contacts.join(","));
}
$(":checkbox").change(displayTest);
displayTest();

//gets all qs
function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var setmyfield = getParameterByName('myqsvar');
if (setmyfield) { 
// something that selects the right checkboxes
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" align="left">
  <div>
    <label for="fieldtotest">Field to test</label>
  </div>
  <div>
    <input type="checkbox" name="fieldtotest" value="John Smith">John Smith<br>
    <input type="checkbox" name="fieldtotest" value="Joseph Augustine">Joseph Peter<br>
    <input type="checkbox" name="fieldtotest" value="Sarah Smith">Sarah Smith<br>
    <input type="checkbox" name="fieldtotest" value="Caroline Gabes">Caroline Gabes
  </div>
</div>
<input type="text" id="outputtest" size="50">
&#13;
&#13;
&#13;

如果该字段是一个简单的文本框,我会选择查询字符串并使用

$('#fileldid').val(qsvalueforthefield)

再次填充该字段,但我不能在单个var / qs中的几个复选框中执行此操作。 这可能吗?

1 个答案:

答案 0 :(得分:1)

如果您在逗号分隔的字符串中有值列表,就像在displayTest()中创建的那样,您可以循环浏览并查看相应的框。

var param = "Joseph Augustine,Caroline Gabes";
$.each(param.split(","), (i, val) => 
    $(":checkbox[name=fieldtotest][value='" + val + "']").prop("checked", true));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" align="left">
  <div>
    <label for="fieldtotest">Field to test</label>
  </div>
  <div>
    <input type="checkbox" name="fieldtotest" value="John Smith">John Smith<br>
    <input type="checkbox" name="fieldtotest" value="Joseph Augustine">Joseph Peter<br>
    <input type="checkbox" name="fieldtotest" value="Sarah Smith">Sarah Smith<br>
    <input type="checkbox" name="fieldtotest" value="Caroline Gabes">Caroline Gabes
  </div>
</div>
<input type="text" id="outputtest" size="50">