Fatal编程技术网
  • jquery/
  • Jquery 选中时移动div复选框

Jquery 选中时移动div复选框

jquery checkbox

Jquery 选中时移动div复选框,jquery,checkbox,css-selectors,Jquery,Checkbox,Css Selectors,我正在尝试实现电梯功能[共有6层和相应的 对于每个复选框，都有一个复选框。根据选中的复选框，电梯 舒德搬到那层楼去 但不知何故，该功能似乎不起作用 以下是我的带有嵌入式jquery脚本的HTMl标记： <!DOCTYPE html> <html> <head> <title>Sample Page</title> <link rel="stylesheet"

我正在尝试实现电梯功能[共有6层和相应的
对于每个复选框，都有一个复选框。根据选中的复选框，电梯
舒德搬到那层楼去

但不知何故，该功能似乎不起作用

以下是我的带有嵌入式jquery脚本的HTMl标记：

<!DOCTYPE html>
    <html>
        <head>
            <title>Sample Page</title>
            <link rel="stylesheet" type="text/css" href="main.css">
    <script src="jquery.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

    $('.container input').change(function(){
    if ($(this).is(':checked')){
            if ($('div.activeDiv')[0]) {
           $(".blockdiv>div").removeClass("activeDiv");}
           $(this).closest('.blockdiv .inactiveDiv').addClass("activeDiv");
    }
    });

    </script>
    <style> .blockDiv {   
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}

.activeDiv{
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
}
.inactiveDiv{
    background: #0000FF;
}</style>
        </head>
        <body>
            <div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>            
            <input type="checkbox" name="floorCheck" value="fifthFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="fourthFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="thirdFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="secondFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="inactiveDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="firstFloor"/>
            </div>
            <div class="container">
                <div class="blockDiv">
                    <div class="activeDiv"></div>
                </div>
                <input type="checkbox" name="floorCheck" value="groundFloor"/>
            </div>
            </div>
        </body>
    </html>


样本页
$（'.container input'）.change（函数（）{
如果（$（this）.is（':checked'））{
if（$（'div.activeDiv'）[0]）{
$（.blockdiv>div”）.removeClass（“activeDiv”）；}
$（this）.closest（'.blockdiv.inactiveDiv'）.addClass（“activeDiv”）；
}
});
.blockDiv{
宽度：60px；
高度：60px；
背景：#0000FF；
边框：2倍实心#000；
}
.activeDiv{
宽度：45px；
高度：45px；
背景：#FFAC00；
左边距：8px；
边缘顶部：8px；
}
.不作为{
背景：#0000FF；
}
删除非活动CLA并添加活动类

试试这个

$(function(){ //this is to call the script only after document is ready
  $('.container input').change(function () {
    if ($(this).is(':checked')) {

      $(".blockDiv > div").removeClass("activeDiv");
      $(this).siblings('.blockDiv').find('.inactiveDiv').addClass("activeDiv");

    }
 });
});
首先将JS包装到一个文档就绪的处理程序中，否则它将无法找到您的元素。（或者将脚本移动到正文的末尾。）

然后更新CSS，在
.inactiveDiv
之后定义
.activeDiv
类，这样，如果一个元素同时具有两个类
，那么activeDiv
将覆盖
。inactiveDiv
——这样你就不必担心删除
.inactiveDiv
，只需添加和删除
.activeDiv

然后请注意，您现有的代码
$（this）.clockdiv（'.blockdiv.inactiveDiv'）
将找不到任何内容，因为
.closest（）
遍历DOM和
。blockdiv
元素是复选框的同级，而不是父级，因此可以使用
.prev（）
方法或使用
.closest（'.container'））
获取父级，然后
查找（'.blockDiv.inactiveDiv'）
返回到块div

  $('.container input').change(function () {
      if (this.checked) {
          $(".blockDiv > div").removeClass("activeDiv");
          $(this).closest('.container').find('.blockDiv .inactiveDiv').addClass("activeDiv");
      }
  });
演示：

还要注意，
this.checked
比
$（this.is）（“：checked”）更简单、更快

非常感谢nnnnnnnn。我正在考虑是否有可能显示橙色div从一层移动到另一层。使其看起来更生动和生动。感谢bipen的所有帮助。你能帮我显示橙色div从一层移动到另一层吗。使其看起来更生动和生动。