Question

我在jqueryscript.net上找到了这个非常有用的脚本BlueToggleButton link

基本上它会将复选框转换为您选择的自定义按钮。它工作得很好，但是如果有一种方法可以对单选按钮做同样的事情，它会更好。我完全没有使用jQuery和Javascript，所以我真的不知道从哪里开始。我试图替换＆＃34;复选框＆＃34;使用＆＃34; radio＆＃34;代码中的字符串但这似乎并没有成功。

脚本看起来像这样。它连接到一个css文件，您可以在其中设置按钮样式，并在按钮内使用一些图像。

$(function ($) {
$.widget("toggle.toggleButton", {
    options : {
        text : "Toggle",
        toggleOnColor : "green",
        onTitle : "On",
        offTitle : "Off",
        onImg: "toggleON.png",
        offImg: "toggleOFF.png",
        change : null
    },

    _create : function() {
        var id = this.element.attr("id");
        var checkBoxStyle = this.element.attr("style");

        this.element.css({
            "display" : "none"
        });

        this.checkboxButton = $("<label>", {
            text : this.options.text,
            "class" : "toggleButton",
            "for" : id,
            "style" : checkBoxStyle
        });

        this.element.after(this.checkboxButton);

        if (this.element.is(":checked")) {
            this.element
                .next("label").css({ "background" : this.options.toggleOnColor, "color" : "white" })
                .prop({ "title" : this.options.onTitle })
                .prepend('<span class="toggle-img" style="background:url(' + this.options.onImg + '); background-position:center;" />');

        } else {
            this.element
                .next("label").css({ "background" : "", "color" : "grey" })
                .prop({ "title" : this.options.offTitle })
                .prepend('<span class="toggle-img" style="background:url(' + this.options.offImg + '); background-position:center;" />');

        };

        this._on(this.element, {
            "change" : function(event) {
                if (this.element.is(":checked")) {
                    this.element
                        .next("label").css({ "background" : this.options.toggleOnColor, "color" : "white" })
                        .prop({ "title" : this.options.onTitle })
                        .find(".toggle-img")
                        .css({"background" : "url(" + this.options.onImg + ")" });
                } else {
                    this.element
                        .next("label").css({ "background" : "", "color" : "grey" })
                        .prop({ "title" : this.options.offTitle })
                        .find(".toggle-img")
                        .css({"background" : "url(" + this.options.offImg + ")" });
                };
            }
        });
    }
});
}(jQuery));

编辑：这是与之一起使用的HTML：

<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<input type="checkbox" id="toggle-button">
<input type="checkbox" id="toggle-button2">

    <script>
        $("#toggle-button").toggleButton({text : "Checked button"});
        $("#toggle-button2").toggleButton({text : "Un-checked button"});
    </script>

有什么想法吗？我试图与创作者联系，但没有得到回复。非常感谢！

Answer 1

你不需要jQuery。你可以用纯CSS来解决它。看到这段代码：

＆＃13;

input
{
  display: none;
}
.notchecked,
.checked {
  display: none;
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
}

input:checked + .label-wrapper .checked {
  display: block;
}

input:not(:checked) + .label-wrapper .notchecked {
  display: block;
}

.label-wrapper {
  width: 200px;
  height: 50px;
  border-radius: 5px;
  background-color: gray;
  position: relative;
  margin: 5px;
}

input:checked + .label-wrapper {
  background-color: green;
}

label {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  curosr: pointer;
}

＆＃13;

<input type='radio' name='radiogroup' id='first-radio' checked>
<div class='label-wrapper'>
  <label for='first-radio'> </label>
  <span class='checked'>Checked</span>
  <span class='notchecked'>Not Checked</span>
</div>
<input type='radio' name='radiogroup' id='second-radio'>

<div class='label-wrapper'>
  <label for='second-radio'></label>
  <span class='checked'>Checked</span>
  <span class='notchecked'>Not Checked</span>
</div>

<input type='radio' name='radiogroup' id='third-radio'>
<div class='label-wrapper'>
  <label for='third-radio'></label>
  <span class='checked'>Checked</span>
  <span class='notchecked'>Not Checked</span>
</div>

＆＃13;

这是JSFiddle：https://jsfiddle.net/9hcmrd7q/1/

Answer 2

您可以在纯CSS中完成此操作，而不需要任何JS，只需最少的额外HTML标记。此解决方案同样适用于单选按钮和复选框。

确保每个＆＃34;可检查＆＃34; （checkbox或radio）input有一个相邻的label。

将课程input__checkable--button添加到input和label

<input type="radio" class="input__checkable--button" name="radioButtons" id="radioButtons_1">
<label for="radioButtons_1" class="label__checkable--button">First Radio Button</label>

添加一些CSS

JSFiddle：https://jsfiddle.net/kevindb/4waydtoa/
Stack Snippet：

＆＃13;

.label__checkable--button {
  float: left;
  min-width: 150px;
  font-weight: bold;
  text-align: center;
  padding: .5em;
  border-radius: 3px;
  margin: .5em;
  background: #d9d9d9;
  cursor: pointer;
  /* Prevent text in buttons from being selected/highlighted */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__checkable--button {
  display: none;
}
.input__checkable--button:checked + .label__checkable--button {
  color: #FFF;
  background: #1C4882;
}

＆＃13;

<input type="radio" name="radioButtons" id="radioButtons_1" value="1" class="input__checkable--button">
<label for="radioButtons_1" class="label__checkable--button">First Radio Button</label>

<input type="radio" name="radioButtons" id="radioButtons_2" value="2" class="input__checkable--button">
<label for="radioButtons_2" class="label__checkable--button">Second Radio Button</label>

<br><br><br>

<input type="checkbox" name="checkButtons" id="checkButtons_1" value="1" class="input__checkable--button">
<label for="checkButtons_1" class="label__checkable--button">First Checkbox Button</label>

<input type="checkbox" name="checkButtons" id="checkButtons_2" value="2" class="input__checkable--button">
<label for="checkButtons_2" class="label__checkable--button">Second Checkbox Button</label>

＆＃13;

Answer 3

尝试在html中包含以下行：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

将jquery脚本转换为复选框以使用单选按钮

3 个答案: