Question

我想要这种类型的切换按钮，请点击下面的链接查看我的要求：

http://www.redbus.in/Booking/SeatSelection.aspx?rt=4017230&doj=30-Nov-2010&dep=04:55%20PM&showSpInst=false

Answer 1

您可以使用PrettyCheckBox

或者您可以使用一些JS自己构建它（如果使用jQuery则更好）

步骤：使用asp.net渲染所需的所有复选框并指定一个ID（每个都不同）和每个的名称，同时设置类。使用正确设置的“for”属性渲染LABEL。在标签中放置应该是你的复选框（图像/链接等）

作为检查类，设置css display：none
使用jquery绑定每个标签的click事件，在事件中提高相关复选框的CLICK（因此它也可以在IE中工作），获取复选框的状态并更新属性（类是最好的）标签的内容。

代码中的

是：

CSS：

.seatcheckbox{
 display:block;
 height:16px;
 width:16px;
 }
.checked {
    background-image: url(chair-red.png)
 }
.unchecked {
    background-image: url(chair-gray.png)
 }
input.hidden{ display:none;}

由asp.net提供的HTML

<input type="checkbox" id="chk1" name="Seats" value="1" class="hidden" />
<label for="chk1"><div class="seatcheckbox"></div></label>

由asp.net提供的相同html中的JQERY脚本

<script type="text/javascript">

$(document).ready(function(){
  $('label').each(function (index, object) {
        if ($(this).attr("for") != "") {

            var ctl = $("#" + $(this).attr("for"));

            if (!ctl.is("input[type=radio]") && !ctl.is("input[type=checkbox]")) {
                return;
            }

            ctl.css("display", "none")

            $(this).click(function (e) {

                try {
                    if ($.browser.msie) {
                        ctl.click();
                    }
                    var lbl = $(this);
                    setTimeout(function () { adg_ChecksRefresh(lbl); }, 1)
                } catch (ex) { }

            });
});

function adg_ChecksRefresh(lbl) {
    var ctl = $("#" + $(lbl).attr("for"));
    var name = ctl.attr("name");
    var id= ctl.attr("id");
    var checked = ctl.is(":checked");

    if (checked) {
        $(lbl).removeClass("unchecked");
        $(lbl).addClass("checked");
    } else {
        $(lbl).removeClass("checked");
        $(lbl).addClass("unchecked");
    }
}

</script>

不要忘记将其包含在HEAD代码中：

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

如果您打算将其用于RADIO BUTTON，请使用以下代码替换整个函数adg_ChecksRefresh（lbl）：

function adg_ChecksRefresh(lbl) {
var ctl = $("#" + $(lbl).attr("for"));
var name = ctl.attr("name");
var id= ctl.attr("id");
var checked = ctl.is(":checked");

if (ctl.is("input[type=radio]")) {
    $("input[name=" + name + "]").each(function () {
        $("label[for=" + $(this).attr("id") + "]").removeClass("checked").addClass("unchecked");
    });

}

if (checked) {
    $(lbl).removeClass("unchecked");
    $(lbl).addClass("checked");
} else {
    $(lbl).removeClass("checked");
    $(lbl).addClass("unchecked");
}

}

主JS经过测试可与所有主浏览器配合使用。但我现场写了必须生成的HTML。希望它能奏效！

轮空

Answer 2

您需要哪个特定方面的座位选择器控件？是否只是希望根据用户点击它们在两个图像之间切换？如果是这样，那么您可以简单地使用jquery的切换功能在2个类之间切换，或者每次单击设置图像的src。

// Include jQuery in your page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

// Create a script block for the toggling
<script type="text/javascript" language="javascript">
$('#seat').click(function() {
  $(this).find('img').toggle();
});
</script>

// Create your markup for the images.
<div id='seat'>
<img id="empty" src="empty_seat.png" alt="" width="100" height="123" style='display:block;' />
<img id="occupied" src="occupied_seat.png" alt="" width="100" height="123" style='display:none;' />
</div>

如何使用.. jquery和vb.net创建切换按钮？

2 个答案: