在动态生成的html页面中重新对齐CheckBox

时间：2014-11-15 06:44:26

标签： javascript jquery css asp-classic

我有一个动态生成的html页面。页面是从后面的代码生成的。每个Div包含一个修改过的复选框按钮（HTN，DN，JAUNDICE），单击该按钮时会显示或隐藏与其对应的div。现在我想要做的是，如果Div包含修改后的复选框按钮，即使选中复选框，所有修改后的复选框也必须按顺序排列在其父div的顶部。我怎么能这样做？

检查我的JSFiddler http://jsfiddle.net/khlakhil/cx9nd5kg/

＆＃13;
＆＃13; 
$(document).ready(function() {
  //Add Date TextBox DatePicker
  $('.DateTextBox').each(function() {
    $(this).datepicker({
      dateFormat: $(this).data('dateformat'),
      showButtonPanel: true,
      changeMonth: true,
      changeYear: true,
      defaultDate: new Date(),
      changeMonth: true,
      changeYear: true
    });
  });

  //Jquery For JumpCheckBox
  $('body').on('click', '.ck-button', function() {
    var chkBox = $(this).find("input[type=checkbox]");
    if (chkBox.is(":checked")) {
      $('#divfor_' + chkBox.attr("id")).hide();
      $('.myCheckbox').prop('checked', false);
      //$(this).parent().parent().parent().find("table").attr("class", "JumpCheckBox");
      $(this).parent().parent().parent().parent().attr("class", "JumpCheckBox");
    } else {
      $('#divfor_' + chkBox.attr("id")).show();
      $('.myCheckbox').prop('checked', true);
      //$(this).parent().parent().parent().find("table").attr("class", "");
      $(this).parent().parent().parent().parent().attr("class", "JumpUnCheckBox");
    }

    //Jquery For Button CheckBox               
  });

  $('body').on('click', '.ck-buttonBox', function() {
    var chkBox = $(this).find("input[type=checkbox]");
    if (chkBox.is(":checked")) {
      $('.myCheckbox').prop('checked', false);
    } else {
      $('#divfor_' + chkBox.attr("id")).show();
      $('.myCheckbox').prop('checked', true);
    }
  });
});
＆＃13; 
.LGBorder {
  border: 1px solid #DDD9D9;
  background-color: #FFF;
  color: #CCC;
}
.LGShadow {
  webkit-box-shadow: 5px 5px 10px -4px #CCCCCC;
  -moz-box-shadow: 5px 5px 10px -4px #CCCCCC;
  box-shadow: 5px 5px 10px -4px #CCCCCC;
}
.ck-button {
  background-color: #459E5A;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}
.ck-button:hover {
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid red;
  overflow: auto;
  float: left;
  color: red;
}
.ck-button label {
  float: left;
}
.ck-button label span {
  text-align: center;
  padding: 3px 0px;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
}
.ck-button label input {
  position: absolute;
  top: -20px;
}
.ck-button input:checked + span {
  background-color: #911;
  color: #fff;
}
.ck-buttonBox {
  background-color: #459E5A;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}
.ck-buttonBox:hover {
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid red;
  overflow: auto;
  float: left;
  color: red;
}
.ck-buttonBox label {
  float: left;
}
.ck-buttonBox label span {
  text-align: center;
  padding: 3px 0px;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
}
.ck-buttonBox label input {
  position: absolute;
  top: -20px;
}
.ck-buttonBox input:checked + span {
  background-color: #911;
  color: #fff;
}
.NewDiv {
  padding-top: 50px;
}
.DivLabel {
  margin-left: 100px;
  margin-top: 10px;
  width: 70%;
  color: Black;
  padding-bottom: 10px;
  border-style: 1px solid;
}
.ControlLabel {} .JumpCheckBox {
  width: 10%;
  display: inline-flex;
  padding-bottom: 25px;
}
.JumpUnCheckBox {
  padding-top: 30px;
}
.NumberTextBox {
  text-align: right;
}
＆＃13; 
<div>
  <div>
    <table width="100%">
      <tbody>
        <tr>
          <td style="width:300px;">Presenting Complaints</td>
          <td>
            <textarea name="ctl12" id="401" runat="server"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
    <table width="100%">
      <tbody>
        <tr>
          <td style="width:300px;">Family History</td>
          <td>
            <textarea name="ctl17" id="418" runat="server"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="DivLabel LGShadow LGBorder">
      <table width="100%" style="text-align:left;">
        <tbody>
          <tr style="background-color: #E7B1B1;">
            <td class="TDisplay">Past History</td>
          </tr>
        </tbody>
      </table>
      <table class="JumpCheckBox">
        <tbody>
          <tr>
            <td style="width:300px">
              <div class="ck-button">
                <label>
                  <input name="ctl27" type="checkbox" id="406" runat="server" data-parentid="402" autocomplete="off"><span>HTN</span>
                </label>
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div id="divfor_406" class="DivLabel LGShadow LGBorder">
        <table width="100%" style="text-align:left;">
          <tbody>
            <tr style="background-color: #E7B1B1;">
              <td class="TDisplay">Htn</td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Medication</td>
              <td>
                <textarea name="ctl38" id="407" runat="server" data-parentid="406"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px">
                <div class="ck-buttonBox">
                  <label>
                    <input name="ctl44" type="checkbox" id="408" runat="server" data-parentid="406" autocomplete="off"><span>Duration</span>
                  </label>
                </div>
              </td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Treatment</td>
              <td><span id="409" runat="server" data-parentid="406"><input id="ctl51" type="radio" name="TREAT" value="ctl51" checked="checked" autocomplete="off"></span>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Complications</td>
              <td><span id="410" runat="server" data-parentid="406"><input id="ctl56" type="radio" name="TREAT" value="ctl56" autocomplete="off"></span>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Remarks</td>
              <td><span id="411" runat="server" data-parentid="406"><input id="ctl61" type="radio" name="TREAT" value="ctl61" autocomplete="off"></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <table class="JumpCheckBox">
        <tbody>
          <tr>
            <td style="width:300px">
              <div class="ck-button">
                <label>
                  <input name="ctl67" type="checkbox" id="403" runat="server" data-parentid="402" autocomplete="off"><span>DM</span>
                </label>
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div id="divfor_403" class="DivLabel LGShadow LGBorder">
        <table width="100%" style="text-align:left;">
          <tbody>
            <tr style="background-color: #E7B1B1;">
              <td class="TDisplay">Dm</td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Medication</td>
              <td>
                <input name="ctl78" type="text" id="404" runat="server" class="DateTextBox hasDatepicker" data-dateformat="dd/MM/yy" data-parentid="403" autocomplete="off">
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Duration</td>
              <td>
                <input name="ctl83" type="text" id="405" runat="server" class="NumberTextBox" onkeypress="return numDotOnly(event)" data-parentid="405" autocomplete="off">
              </td>
            </tr>
          </tbody>
        </table>
        <div id="divfor_405" class="DivLabel LGShadow LGBorder">
          <table width="100%" style="text-align:left;">
            <tbody>
              <tr style="background-color: #E7B1B1;">
                <td class="TDisplay">Duration</td>
              </tr>
            </tbody>
          </table>
          <table width="100%">
            <tbody>
              <tr>
                <td style="width:300px;">test level 4</td>
                <td>
                  <input name="ctl92" type="checkbox" id="428" runat="server" data-parentid="405" autocomplete="off">
                </td>
              </tr>
            </tbody>
          </table>
          <table width="100%">
            <tbody>
              <tr>
                <td style="width:300px;">test level 4 - II</td>
                <td>
                  <select name="ctl97" id="429" runat="server" data-parentid="405">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>

                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <table class="JumpCheckBox">
        <tbody>
          <tr>
            <td style="width:300px">
              <div class="ck-button">
                <label>
                  <input name="ctl103" type="checkbox" id="412" runat="server" data-parentid="402" autocomplete="off"><span>JAUNDICE</span>
                </label>
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div id="divfor_412" class="DivLabel LGShadow LGBorder">
        <table width="100%" style="text-align:left;">
          <tbody>
            <tr style="background-color: #E7B1B1;">
              <td class="TDisplay">Jaundice</td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Medication</td>
              <td>
                <textarea name="ctl114" id="413" runat="server" data-parentid="412"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Duration</td>
              <td>
                <textarea name="ctl119" id="414" runat="server" data-parentid="412"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Remarks</td>
              <td>
                <textarea name="ctl124" id="415" runat="server" data-parentid="412"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="100%">
          <tbody>
            <tr>
              <td style="width:300px;">Complications</td>
              <td>
                <textarea name="ctl129" id="416" runat="server" data-parentid="412"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <table width="100%">
      <tbody>
        <tr>
          <td style="width:300px;">Personal History</td>
          <td>
            <textarea name="ctl134" id="417" runat="server"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题