Question

我有HTML表单，我使用＆＃34; radio＆＃34;按钮，但我希望它们像无线电和复选框的组合一样工作：可以检查一个选项，但也有可能取消选择一个选项。

我的表格在这里：

<form name="myform">
<input type="radio" name="transport" value="transport1">
<input type="radio" name="transport" value="transport2">
<input type="radio" name="transport" value="transport3">
</form>

我找到了很好的功能：

<script>
    $(document).ready(function() {
(function ($) {
$.fn.uncheckableRadio = function () {

    return this.each(function () {
        var radio = this;
            $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                $(radio).data('wasChecked', radio.checked);
            });

            $('label[for="' + radio.id + '"]').add(radio).click(function () {
                if ($(radio).data('wasChecked'))
                    radio.checked = false;
            });
       });
};
})(jQuery);

$('input[type=radio]').uncheckableRadio();
});

</script>

但是这个功能损害了我的不同功能，用于从表单输入中计算价格（当我选择正确添加无线电按钮价格时，但是当我取消选择但它没有改变时）：

function count_price()
        {
        var price=0;

        if (document.forms["myform"].transport[0].checked) {price+=100;}
        if (document.forms["myform"].transport[1].checked) {price+=50;}
        if (document.forms["myform"].transport[2].checked) {price+=200;}    
        }

        document.all["counted_price"].innerHTML=price;
        };

不使用此＆＃34; uncheckableRadio＆＃34; function我的count_price函数效果很好。

Answer 1

尝试此操作：您可以使用数据检查属性来保存单选按钮的已选中/未选中状态，并相应地更改其checked属性

$(document).ready(function() {
    $('form[name=myform] input[type=radio][name=transport]').click(function(){
        var checked = $(this).data('checked') || false;
         $(this).data('checked', !checked);
        $(this).attr('checked', !checked);
        $('form[name=myform] input[type=radio][name=transport]').not(this).data('checked', false);
    });
});

<强> JSfiddle Demo

Answer 2

我假设你首先调用count_price（）然后调用uncheckableRadio（）。尝试在radio.checked = false;之后调用count_price（）来更新价格。

$('label[for="' + radio.id + '"]').add(radio).click(function () {
    if ($(radio).data('wasChecked'))
        radio.checked = false;
    count_price();
});

此外，我支持Simbas评论。只需添加另一个按钮并停止使用该脚本。

Answer 3

尝试此解决方案

https://jsfiddle.net/93fy9dwo/

$(document).ready(function(){
    $('input[type=radio]').change(function(){
        this.checked = true;
    });
    $('input[type=radio]').click(function(){
        this.checked = false;
    });
});

收音机和复选框的组合

3 个答案: