个人中心
gpt4 book ai didi

javascript - 使用按钮作为开关或复选框

转载 作者：行者123 更新时间：2023-11-28 16:36:51 26 4
gpt4 key购买 nike

我尝试快速详细地解释我打算做什么。我有一个表格，其中每个单元格都放置了一个按钮 CSS，如下所示:

<input type="button" class="AreaFree" id="#"> //a different id for each button

我的意图是选择(点击)许多不同的按钮；每次选择按钮时，它都必须更改颜色(或更改按钮的类别)；如果再次按下，它必须恢复到原来的状态。接下来，我想要一个提交按钮，它调用一个 servlet 并发送哪些按钮已被选中，哪些未被选中。现在我的问题是:是否可以使用 JavaScript？如果是，您能否分享执行此操作所需的代码？如果不是，您有什么建议？

下面分享一段涉及到的代码。如果我不够详细，我提前道歉。

HTML

<form action="myServlet" method="post">
    <table cellspacing="0" cellpadding="0">
       <tr>
          <td><input type="button" class="AreaFree" id="11"/></td>
          <td><input type="button" class="AreaFree" id="12"/></td>
          <td><input type="button" class="AreaFree" id="13"/></td>
          <td><input type="button" class="AreaFree" id="14"/></td>
          <td><input type="button" class="AreaFree" id="15"/></td>
       </tr>
       <tr>
          <td><input type="button" class="AreaFree" id="21"/></td>
          <td><input type="button" class="AreaFree" id="22"/></td>
          <td><input type="button" class="AreaFree" id="23"/></td>
          <td><input type="button" class="AreaFree" id="24"/></td>
          <td><input type="button" class="AreaFree" id="25"/></td>
       </tr>
    </table>

    <input type="submit" value="submit">
</form>

CSS

.AreaFree{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    background-color:#44c767;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaFree:hover {
    background-color:#5cbf2a;
}
.AreaFree:active {
    position:relative;  
}


.AreaOccupated{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;   
    background-color:#E00000;
    border:1px solid #B00000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaOccupated:hover {
    background-color:#D00000;
}
.AreaOccupated:active {
    position:relative;  
}


.AreaBlocked{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    background-color:#A8A8A8;
    border:1px solid #808080;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaBlocked:hover {
    background-color:#989898;
}
.AreaBlocked:active {
    position:relative;  
}

最佳答案

将此添加到您的 html 的底部:

$('input[type="button"]').on('click', function(evt) {
    var ary = $(this).attr('class').split(' ');
    if (ary.indexOf('clicked') === -1) {
        $(this).addClass('clicked');    
    }
    else {
        $(this).removeClass('clicked');    
    }
});

同时添加这个类:

input.clicked {
    background-color: red;
}

现在，您必须处理悬停颜色问题，但代码应该会给您一个良好的开端。

更新:(这段代码对我有用)

<!DOCTYPE html>
<html lang="en">
   <head>
    <style>
.AreaFree{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    background-color:#44c767;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaFree:hover {
    background-color:#5cbf2a;
}
.AreaFree:active {
    position:relative;  
}


.AreaOccupated{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;   
    background-color:#E00000;
    border:1px solid #B00000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaOccupated:hover {
    background-color:#D00000;
}
.AreaOccupated:active {
    position:relative;  
}


.AreaBlocked{
    -moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    -webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
    background-color:#A8A8A8;
    border:1px solid #808080;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:15px 21px;
    text-decoration:none;
}
.AreaBlocked:hover {
    background-color:#989898;
}
.AreaBlocked:active {
    position:relative;  
}

input.clicked {
    background-color: red;
}

    </style>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
   </head>
   <body>
<form action="myServlet" method="post">
    <table cellspacing="0" cellpadding="0">
       <tr>
          <td><input type="button" class="AreaFree" id="11"/></td>
          <td><input type="button" class="AreaFree" id="12"/></td>
          <td><input type="button" class="AreaFree" id="13"/></td>
          <td><input type="button" class="AreaFree" id="14"/></td>
          <td><input type="button" class="AreaFree" id="15"/></td>
       </tr>
       <tr>
          <td><input type="button" class="AreaFree" id="21"/></td>
          <td><input type="button" class="AreaFree" id="22"/></td>
          <td><input type="button" class="AreaFree" id="23"/></td>
          <td><input type="button" class="AreaFree" id="24"/></td>
          <td><input type="button" class="AreaFree" id="25"/></td>
       </tr>

    <input type="submit" value="submit">
</form>

<script>
$('input[type="button"]').on('click', function(evt) {
  var ary = $(this).attr('class').split(' ');
  if (ary.indexOf('clicked') === -1) {
    $(this).addClass('clicked');    
  }
  else {
    $(this).removeClass('clicked');    
  }
});
</script>
   </body>
</html>

更新:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .AreaFree {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #44c767;
            border: 1px solid #18ab29;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaFree:hover {
            background-color: #5cbf2a;
        }

        .AreaFree:active {
            position: relative;
        }

        .AreaOccupated {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #E00000;
            border: 1px solid #B00000;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaOccupated:hover {
            background-color: #D00000;
        }

        .AreaOccupated:active {
            position: relative;
        }

        .AreaBlocked {
            -moz-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            -webkit-box-shadow: inset 0px 1px 0px 0px #3dc21b;
            background-color: #A8A8A8;
            border: 1px solid #808080;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 16px;
            font-weight: bold;
            padding: 15px 21px;
            text-decoration: none;
        }

        .AreaBlocked:hover {
            background-color: #989898;
        }

        .AreaBlocked:active {
            position: relative;
        }

        input.clicked {
            background-color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
    <form action="myServlet" method="post">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <input type="button" class="AreaFree" id="0" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="1" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="2" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="3" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="4" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="AreaFree" id="5" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="6" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="7" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="8" />
                </td>
                <td>
                    <input type="button" class="AreaFree" id="9" />
                </td>
            </tr>
            <input type="hidden" id="matrix" value="" />
            <input type="submit" value="submit">
    </form>

    <script>
        var matrix = [];
        for (var i = 0; i < 10; i++) {
            matrix.push(0);
        }
        // set the hidden field on init
        $('#matrix').val(matrix);
        $('input[type="button"]').on('click', function(evt) {
            var me = $(this);
            var idx = +me.attr('id'); // the + sign turns this value to a number
            if (matrix[idx] === 0) {
                matrix[idx] = 1;
                me.addClass('clicked');
            } else {
                matrix[idx] = 0;
                me.removeClass('clicked');
            }
            // update the hidden field every time a user clicks something
            $('#matrix').val(matrix);
        });
    </script>
</body>

</html>

我在最新的代码中做了一些事情。由于我们正在跟踪矩阵数组中的状态，因此无需查看类。使用矩阵中的状态来确定。比较 0 和 1 比字符串和数组更快。

我还更改了按钮 ID 以帮助更新矩阵。

关于javascript - 使用按钮作为开关或复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34376881/

26 4 0
文章推荐： javascript - 是否有一个 javascript (jquery) 库用于从 cgi 参数更新 html 表单控件？
文章推荐： javascript - 将绝对 div 向左滑动 120%，向左滑动 -10px
文章推荐： jquery - 无论内部 Accordion 的状态如何，确定外部 Accordion 的状态
文章推荐： php - CSS 不影响 PHP
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com