单选按钮改变事件和改进类似的功能

Radio button change events and improving similar functions

本文关键字：功能 改变 事件 单选按钮      更新时间：2023-09-26

我正在寻找一种更智能的方法来重用具有类似目的的函数。例如，我想改变不同的单选按钮，在不同的div上切换隐藏类。

JSFiddle联系

如何将JQuery变成一个可重用的函数，

<form>
    <label>Enable One</label>
    <input type="radio" name="one" value="yes" checked class="eOne">Yes
    <input type="radio" name="one" value="no" class="enBg">No</form>
<form>
    <label>Enable Two</label>
    <input type="radio" name="two" value="yes" checked class="eTwo">Yes
    <input type="radio" name="two" value="no" class="enBrand">No</form>
<form>
    <label>Enable Three</label>
    <input type="radio" name="three" value="yes" checked class="eThree">Yes
    <input type="radio" name="three" value="no" class="enS">No</form>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
div {
    width: 100px;
    height: 100px;
}
.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: blue;
}
.hide {
    display: none;
}
$(".eOne").change(function () {
    $('.one').toggleClass("hide");
});
$(".eTwo").change(function () {
    $('.two').toggleClass("hide");
});
$(".eThree").change(function () {
    $('.three').toggleClass("hide");
});

另外，由于某些原因，在演示中(但不是在我的实时版本中)，更改功能不会切换类，除非我单击no，然后单击yes。

为你的html使用class:

<form>
    <label>Enable One</label>
    <input type="radio" name="one" value="yes" class="one" checked />Yes
    <input type="radio" name="one" value="no" class="one" />No
</form>
<form>
    <label>Enable Two</label>
    <input type="radio" name="two" value="yes" class="two" checked />Yes
    <input type="radio" name="two" value="no" class="two" />No
</form>
<div class="one"></div>
<div class="two"></div>

为javascript编写函数:

/*
 * Bind a change event handler to a radio-input
 * @param cls - selector string to input AND to-change div
 */
function bindChangeHandler(cls) {
    $('input.' + cls).change(function () {
        var element = $(this),// get Input element
            name = element.val(), // get Input element name
            is_checked = element.prop('checked'); // get state of radio box
        // return if a deselect triggered the event (may be unnecessary)
        if (!is_checked) return;
        // change class of div-box according to checked radio-box 
        if  (name == 'yes') {
            $('div.' + cls).removeClass('hide');
        } else {
            $('div.' + cls).addClass('hide');
        }
    });
}
$(document).ready(function(){
    bindChangeHandler('one');
    bindChangeHandler('two');
});

HTML

<form>
    <label>Enable One</label>
    <input type="radio" name="one" value="yes" class="eOne" checked>Yes
    <input type="radio" name="one" value="no" class="enBg">No
    <br /><label>Enable Two</label>
    <input type="radio" name="two" value="yes" checked class="eTwo">Yes
    <input type="radio" name="two" value="no" class="enBrand">No
    <br /><label>Enable Three</label>
    <input type="radio" name="three" value="yes" checked class="eThree">Yes
    <input type="radio" name="three" value="no" class="enS">No
</form>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

我没有改变任何CSS，但改变了你的Javascript代码。看看这个。没有必要使用.hideclass类，因为我们已经为此内置了一个方法。toggle()方法。如果您想在单击单选按钮时立即隐藏它，那么只需将所有toggle()更改为toggle(50)。此更改将在50毫秒内隐藏div框。

$("input[name='one']").change(function(){
    $(".one").toggle();//add a number in toggle method to have a small animation effect :)
});
$("input[name='two']").change(function(){
    $(".two").toggle();
});
$("input[name='three']").change(function(){
    $(".three").toggle();
});

我也更新了js小提琴上的代码。也许这对你有帮助:)

我喜欢米勒的回答。下面是用一个允许更一般用途的回调重写的相同代码:

function hide(cls, name) {
    // change class of div-box according to checked radio-box 
    if  (name == 'yes') {
        $('div.' + cls).removeClass('hide');
    } else {
        $('div.' + cls).addClass('hide');
    }
}
/*
 * Bind a change event handler to a radio-input
 * @param cls - selector string to input AND to-change div
 */
function bindChangeHandler(cls, callback) {
    $('input.' + cls).change(function () {
        var element = $(this),// get Input element
            name = element.val(); // get Input element name
        callback(cls, name);
    });
}
$(document).ready(function(){
    bindChangeHandler('one', hide);
    bindChangeHandler('two', hide);
});
相关文章：