带有动作的切换按钮
Toggle button with action
本文关键字:按钮 更新时间:2023-09-26
我使用了一段代码来创建用于特定功能的切换按钮(开/关开关)。该功能包括在按钮从一个切换到另一个时,屏幕必须将数据显示为选项卡或全部。我怎么能得到的值,已点击时,切换开关。
这是html:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
这是css:
.onoffswitch {
position: relative; width: 35px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display:inline-block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 16px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 12px; padding: 0; line-height: 12px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #2FCCFF; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 13px; margin: -0.5px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 16px;
position: absolute; top: 0; bottom: 0; right: 19px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
文本必须位于开关的左右两侧。制表符在左边,全部在右边。
如何获得已选择的内容并相应地显示内容?
我不太明白你的问题。我已经更新了你的jsfiddle,如下所述。是你想要的东西吗?
$('#myonoffswitch').click(function(){
$('.tab').hide();
if($('#myonoffswitch').attr('checked') == "checked")
{
$('#yes').show();
}
else
{
$('#no').show();
}
//alert($('#myonoffswitch').attr('checked'));
});
http://jsfiddle.net/5jDdg/1/<?php if((@$personal_expense_itemize=="Y")||(@$personal_expense_itemize=="on")){
$checked = 'checked';
}?>
<div>
<div class="onoffswitch">
<input id="myonoffswitch" class="onoffswitch-checkbox" name="personal_expense_itemize" type="checkbox" <?php echo @$checked;?>>
<label for="myonoffswitch" class="onoffswitch-label">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Javascript按钮下拉列表
- jquery试图按名称获取按钮位置
- 漂亮照片图片库中的Facebook赞按钮
- 扩展移相器按钮类不工作
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 单击按钮以等待单击按钮
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何从querySelectorAll中获取按钮类型
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 按下按钮时保存cookie
- 是否可以禁用jquery中的单个单选按钮
- ASP.NET通过单击JavaScript按钮触发c#事件
- 当我点击jsf中的primefaces命令按钮时,如何获得点击事件
- 点击按钮输入不起作用
- Javascript:无法获取变量中的单选按钮值