从复选框中提取值并附加到URL(具有相同类的多个复选框)

时间:2018-11-28 18:01:45

标签: javascript jquery

好的,这就是最终目标。

最后,我将使用多个复选框来过滤页面上的结果。选中某个复选框后,会将值附加到网址中。

然后我需要做相反的事情。如果用户输入该特定URL,它将把该复选框的默认值更改为选中。

我正在使用代码,但是我无法使用特定的复选框来执行此操作,它只是继续从找到的第一个值中提取。我知道有一个更好的方法,那就是为每个复选框创建不同的单击函数并为每个复选框运行不同的语句,我似乎无法弄清楚那部分。

这里是我所拥有的:

<input type="checkbox" id="business" class="myCheckbox" value="business" name="Industry"/> Business Communcations<br>
<input type="checkbox" id="construction" class="myCheckbox" value="construction" name="Industry"/> Construction<br>
<input type="checkbox" id="education" class="myCheckbox" value="education" name="Industry"/> Education<br>
<input type="checkbox" id="energy" class="myCheckbox" value="energy" name="Industry"/> Energy


  <script type="text/javascript">

    var url = location.search;

    var check = $(".myCheckbox");
    var checkValue = check.attr('value');
    var attr = $('.myCheckbox').attr('checked');

  // When checked, append value to URL

    $(".myCheckbox").click(function() {
      this.setAttribute("checked", "checked");
      if(typeof attr !== undefined && attr !== false){
      var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + checkValue;
      window.history.pushState({path:newurl},'',newurl);
    }

  });

  // Check if url = value for default checkmarks

      $(document).ready(function() {

        if (window.location.search == "?" + checkValue) {
            business.setAttribute("checked", "checked");
      }
  });

  </script>

感谢您的帮助!

0 个答案:

没有答案