如何选择和取消选中该框，如果选择了该值或两者皆有？

Posted 2021-05-06

我有一个工作代码，可以通过检查我的频道中URL的参数来检查每个复选框，并执行window.open。我想检查是否选择了一个组合，并且必须在Thingspeak中将URL请求填充到我的频道中。这是目前在下面执行此逻辑的代码。

 <div class = "custom-control custom-checkbox">
  <input type="checkbox" class ="custom-control-input" id="temperature">
    <label class = "custom-control-label" for="temperature">Temperature</label>
    </div>

 <div class = "custom-control custom-checkbox">
 <input type = "checkbox" class="custom-control-input" id="illuminance">
   <label class = "custom-control-label" for = "illuminance">Illuminance</label>
  </div>   
 <div class ="custom-control custom-checkbox">
 <input type ="checkbox" class="custom-control-input" id="button-state">
   <label class ="custom-control-label" for = "button-state">Button-State</label>


  // checking for per number of entries to read.
  $(function() {
    $("#download").click(function(e) {
      e.preventDefault();

      if($('#temperature').is(':checked')) {
        window.open('https://api.thingspeak.com/channels/899906/fields/1.csv');
      }
      if($('#illuminance').is(':checked')){
        window.open('https://api.thingspeak.com/channels/899906/fields/2.csv');
      }
      if($('#button-state').is(':checked')){
        window.open('https://api.thingspeak.com/channels/899906/fields/8.csv');
      }

    });

  });

  // check combination of either

  // downloading the date range from start to end.
  $(function() {
    $("#download").click(function(e){
      e.preventDefault();
      window.open('https://api.thingspeak.com/channels/899906/feeds.csv?start=2019-11-19%2019:11:19&end=2019-11-20%2019:11:20');

    });

  });

 //checking for multiple entries to read.  
  $(document).ready(function() {
    $('#download').click(function() {
    var hcount = 0;
    if($('#temperature').prop('checked')) hcount++;
    if($('#illuminance').prop('checked')) hcount++;
    if($('#button-state').prop('checked')) hcount++;
      if(hcount > 1) {
        window.location.href ='https://api.thingspeak.com/channels/899906/feeds.csv?results=100&median=10';
      }
    });
  });

答案

我检查了您的代码，发现您的dom中没有下载ID，这就是为什么它不起作用的原因。如果将＃download替换为。custom-control-input，则此代码将正常工作。我正在与上述更新共享您的代码。

<!---Downloading File using 
Jquery with Buttons---->
  <div class="form-group"><br>
  <div class="col-md-1.9 text-center">
   <button id="download" name="download" class="btn btn-warning">Download</button><br>
    </div> 
  </div>

<div class = "custom-control custom-checkbox">
    <input type="checkbox" class ="custom-control-input" id="temperature">
    <label class = "custom-control-label" for="temperature">Temperature</label>
</div>

<div class = "custom-control custom-checkbox">
    <input type = "checkbox" class="custom-control-input" id="illuminance">
    <label class = "custom-control-label" for = "illuminance">Illuminance</label>
</div>   
<div class ="custom-control custom-checkbox">
    <input type ="checkbox" class="custom-control-input" id="button-state">
    <label class ="custom-control-label" for = "button-state">Button-State</label>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

    <script>
        // checking for per number of entries to read.
        $(function () {

            $(".custom-control-input").click(function (e) {
                e.preventDefault();

                if ($('#temperature').is(':checked')) {
                    window.open('https://api.thingspeak.com/channels/899906/fields/1.csv');
                }
                if ($('#illuminance').is(':checked')) {
                    window.open('https://api.thingspeak.com/channels/899906/fields/2.csv');
                }
                if ($('#button-state').is(':checked')) {
                    window.open('https://api.thingspeak.com/channels/899906/fields/8.csv');
                }

            });

        });

        // check combination of either

        // downloading the date range from start to end.
        $(function () {
            $(".custom-control-input").click(function (e) {
                e.preventDefault();
                window.open('https://api.thingspeak.com/channels/899906/feeds.csv?start=2019-11-19%2019:11:19&end=2019-11-20%2019:11:20');

            });

        });

        //checking for multiple entries to read.  
        $(document).ready(function () {
            $('.custom-control-input').click(function () {
                var hcount = 0;
                if ($('#temperature').prop('checked'))
                    hcount++;
                if ($('#illuminance').prop('checked'))
                    hcount++;
                if ($('#button-state').prop('checked'))
                    hcount++;
                if (hcount > 1) {
                    window.location.href = 'https://api.thingspeak.com/channels/899906/feeds.csv?results=100&median=10';
                }
            });
        });

    </script>

尝试一下。