Question

我有四个checkboxes，点击其中任何一个都会从服务器返回相应的html代码。我希望在选择2 checkboxes时，屏幕应分为2，类似于选择3 checkboxes为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为真，则会在那里进行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');
  }
});

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

1 个答案: