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

Question

我在 jqueryscript.net link 上发现了这个名为 BlueToggleButton 的非常有用的脚本

基本上它将复选框转换为您选择的自定义按钮。它工作得很好，尽管如果有办法对单选按钮做同样的事情会更好。我完全不喜欢 jQuery 和 Javascript，所以我真的不知道从哪里开始。我试图用“radio”替换代码中的“checkbox”字符串，但这似乎没有奏效。

脚本如下所示。它连接到一个 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

您可以在纯 CSS 中做到这一点，根本不需要任何 JS，只需最少的额外 HTML 标记。此解决方案同样适用于单选按钮和复选框。

1. 确保每个“可检查”（checkbox 或 radio）input 都有一个相邻的 label。

2. 将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>
   

3. 添加一些 CSS

JSFiddle：https://jsfiddle.net/kevindb/4waydtoa/
堆栈片段：

.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;
}

<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>

Answer 2

你不需要 jQuery。你可以用纯 CSS 来解决它。请参阅此代码：

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;
}

<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>

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

Answer 3

尝试在你的 html 中包含以下行：

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