javascript - 根据复选框输入在 html 中分屏

Question

我有四个复选框，单击其中任何一个都会从服务器返回各自的html代码。我希望在选择 2 个复选框时屏幕应分成 2 个，类似地在选择 3 个复选框时屏幕应分成 3 个。 如何使用 Jquery、HTML 和 CSS 编写逻辑。

$(document).ready(function () {
    $("#go").click(function () {

        $("#output1").html('');
        $("#output2").html('');
        $("#output3").html('');
        $("#output4").html('');




        if ($('#getdisabledusers').prop("checked") == true)
        {
            $("#output1").html("<img src='http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif'  width='200' height='200' />");
            $("#box1").addClass("checkedbox");
            $.ajax({
                url: "/MVC_client/getdisabledusers",
                success: function (data) {
                    $("#output1").html(data);
                }
            });
        }

这里我有一个 JS 中的方法。 Output1、output2、output3.... 是四个 div。如果 checkbox 为 true ，则 ajax 调用将返回输出。

Answer 1

您可以使用 css display:table 和 display:table-cell 做您想做的事情: DEMO

HTML

<div class="checkbox-container">
  <div class="input-box">
    <input type="checkbox"><label>option 1</label>
  </div>
  <div class="input-box">
    <input type="checkbox"><label>option 2</label>
  </div>
  <div class="input-box">
    <input type="checkbox"><label>option 3</label>
  </div>
  <div class="input-box">
    <input type="checkbox"><label>option 4</label>
  </div>
</div>
<div class="container">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

SCSS

.container{
  width:100%;
  height:500px;
  display:table;

  section{
    display:none;
    &.show{
      display:table-cell;
    }
    &:nth-child(1){
      background-color:red;
    }
    &:nth-child(2){
      background-color:yellow;
    }
    &:nth-child(3){
      background-color:blue;
    }
    &:nth-child(4){
      background-color:green;
    }
  }
}
.checkbox-container{
  text-align:center;
  .input-box{
    display:inline-block;
  }
}

jQuery

$('input[type=checkbox]').change(function(){
    var index=$(this).parent().index();
    if($(this).is(':checked')){
        $('section').eq(index).addClass('show');
    //your ajax call goes here
  }
  else{
    $('section').eq(index).removeClass('show');
  }
});