从jquery中的按钮组切换单击按钮的值

时间:2015-09-08 14:27:40

标签: javascript jquery html

我正在尝试使用asp.net mvc 4& jQuery 1.9.1我想在文本框中为按下的相应按钮插入布尔值(Y or N)。它适用于单个按钮,但它不适用于按钮组。这是我的代码,

$(document).ready(function () {
    var isClicked = 0;
    $('.btn').click(function () {
        if (isClicked == 0) {
            isClicked = 1;
            $(this).toggleClass('color-blue color-green');
            $(this).next('.assignCheck').val('Y');
        } else if (isClicked == 1) {
            isClicked = 0;
            $(this).toggleClass('color-green color-blue');
            $(this).next('.assignCheck').val('N');
        }
    });
});

JSFiddle Demo

如何使按钮单独工作?非常需要这个帮助。感谢。

1 个答案:

答案 0 :(得分:3)

如果点击值为1或0,您可以使用带按钮的数据属性进行存储,并使用该值更新相应的文本框

Live Demo

HTML

<button class="btn color-blue" data-clicked="0">ONE</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">TWO</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">THREE</button>
<input type="text" class="assignCheck" />

JQuery的

$(document).ready(function () {        
    $('.btn').click(function () {
        var isClicked = $(this).data("clicked");        
        if (isClicked == 0) {
            isClicked = 1;
            $(this).toggleClass('color-blue color-green');
            $(this).next('.assignCheck').val('Y');
        } else if (isClicked == 1) {
            isClicked = 0;
            $(this).toggleClass('color-green color-blue');
            $(this).next('.assignCheck').val('N');
        }
        $(this).data("clicked", isClicked);
    });
})