Сочетание радио и флажка

Question

У меня есть HTML-форма, где я использую кнопки «радио», но я бы хотел, чтобы они работали, как если бы они были комбинацией радио и флажка: можно проверить один вариант, но также есть возможность отменить выбор опции.

Моя формы здесь:

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

Без использования этой функции «uncheckableRadio» функция count_price работает хорошо.

Answer 1

Я предполагаю, что вы называете count_price (), а затем uncheckableRadio(). Попробуйте позвонить в count_price() после radio.checked = false;, чтобы уточнить цену.

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

Далее я поддерживаю комментарий Simbas. Просто добавьте еще одну кнопку и прекратите использовать скрипт.

Answer 2

Попробуйте это: Вы можете использовать атрибут данных проверяются, чтобы сохранить проверили/бесконтрольно состояние переключателя и изменить его атрибут 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 3

попробовать это решение

https://jsfiddle.net/93fy9dwo/

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