Question

我想根据选中的复选框来更改一页的视图。同样，当一个被选中时，另一个也将变为未选中状态。

<input class="searchType" type="checkbox"></input>
<input class="searchType2" type="checkbox"></input>

我尝试过类似的操作，但是我不知道如何添加其他解决方案（如果选中了另一个复选框）

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "GET",
                url: 'projects/index',
                data: $(this).attr('id'),

                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });
      $('.searchType2').click(function() {
          alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
          if(this.checked){
              $.ajax({
                  type: "GET",
                  url: 'projects/categories',
                  data: $(this).attr('id'), 

                  success: function(data) {
                      alert('it worked');
                      alert(data);
                      $('#container').html(data);
                  },
                  error: function() {
                      alert('it broke');
                  },
                  complete: function() {
                      alert('it completed');
                  }
              });

          }
      });

当我尝试这样的代码时，在服务器控制台中会出现第一个复选框：

Rendering projects/index.html.erb
Completed 200 OK in 217ms (Views: 197.8ms | ActiveRecord: 7.0ms)

如果已选中其他

Rendering projects/categories.html.erb
Completed 200 OK in 217ms (Views: 197.8ms | ActiveRecord: 7.0ms)

似乎可行，但实际上，它不会改变任何路线，所有都保持不变

欢呼

Answer 1

您的输入没有id属性，请添加attributes

HTML

<input id="1" value="1" type="checkbox" class="searchType">
<input id="2" value="2" type="checkbox" class="searchType">

Javacript

$('.searchType').click(function() {
    var input = $(this);
    var val = input.val();
       if(input.is(':checked')){
            $.ajax({
                type: "GET",
                url: 'projects/index',
                data: {id : val},

                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

Answer 2

由于您的路由无效，因此您需要更新网址，而不是参数。

因此，最终结果应该是projects/index/searchType，而不是projects/index?searchType

下面的代码段是一个示例，应涵盖您的所有问题。

它将取消选中不是执行操作的复选框的所有复选框。尽管我建议在这种情况下使用select或radio。

var searchType = document.getElementById("searchType"); //Get the checkbox element
var searchType2 = document.getElementById("searchType2");

searchType.addEventListener("change", search); //set the onchange event for each checkbox
searchType2.addEventListener("change", search);

function search() {
    var checkbox = this;

    var checkboxes = document.querySelectorAll("input[type=\"checkbox\"]");

    for (var i = 0; i < checkboxes.length; i++) {
        var chk = checkboxes[i];

        if (chk !== checkbox) {
            chk.checked = false;
        }
    }

    if (checkbox.checked) {
        $.ajax({
            type: "GET",
            url: 'projects/index/' + checkbox.id,
            success: function (data) {
                alert('it worked');
                console.log(data);
                $('#container').html(data);
            },
            error: function () {
                console.log('it broke');
            },
            complete: function () {
                console.log('it completed');
            }
        });
        return;
    }

    console.log("no checkbox selected");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchType" class="searchType" type="checkbox"></input>
<input id="searchType2" class="searchType2" type="checkbox"></input>

如何基于Ajax中的复选框呈现不同的URL？

2 个答案: