切换单选按钮检查jQuery中的状态 [英] Toggle Radio buttons checked status in jQuery

问题描述

我想略微扩展单选按钮的功能，即取消选中的功能（点击时，如果以前检查过）。

I want to slightly extend functions of Radio buttons, i.e. ability to un-check (on click, if it was previously checked).

HTML 代码就像 -

<input type='radio' value='1' id='country_1' name='countries' class='option_selector'>
<label for='country_1'>India</label>
<input type='radio' value='2' id='country_2' name='countries' class='option_selector'>
<label for='country_2'>USA</label>
<input type='radio' value='3' id='country_3' name='countries' class='option_selector'>
<label for='country_3'>UK</label>

<input type='radio' value='1' id='city_1' name='cities' class='option_selector'>
<label for='city_1'>Jaipur</label>
<input type='radio' value='2' id='city_2' name='cities' class='option_selector'>
<label for='city_2'>Delhi</label>
<input type='radio' value='3' id='city_3' name='cities' class='option_selector'>
<label for='city_3'>Mumbai</label>

jQuery 到目前为止 -

$('.option_selector').click(function () {
    var id = $(this).attr('id');
    if($('#' + id).is(':checked')) {
        $("#" + id).prop("checked", false);
    } else {
        $("#" + id).prop("checked", true);
    }
});

我知道为什么这不起作用 - 因为eveytime我点击单选按钮它的初始状态将是检查，因此将取消选中最终状态。
但是，我无法让它以理想的方式运作。

I know why this is Not working - because eveytime I click on radio-button its initial status will be checked, therefore final status will be unchecked. But, I couldn't figure out to make it work in the desired way.

ps - 对于那些人来说想知道，为什么我不使用复选框而不是单选按钮：我正在尝试对我的实际检查机构进行测验副本（用于练习目的）。他们不使用复选框，而是使用带有取消选择选项的附加功能的单选按钮。所以，我只是想避免任何不必要的混淆。

p.s. - For those, who are wondering, why I am not using checkboxes instead of radio buttons : I am trying to make quiz replica (for practice purpose) of My actual Examining body. They people don't use checkboxes, instead use radio buttons with an additional feature of un-select the option. So, I am just trying to avoid any un-necessary confusion.

编辑 - 1：它可能与所述问题重复，也可能不重复。但是，上述问题的解决方案是基于他们的名字无法选择的无线电组，这不能解决我的问题。

Edit - 1 : It may or may not be duplicate of mentioned question. But, the solution in the mentioned question works on the basis of "group of radios deselectable by their name", which is not solving my problem.

推荐答案

您将结合单击事件并使用数据属性来跟踪状态单选按钮：

You would combine the click event and use a data-attribute to keep track of the state of the radio buttons:

$('.option_selector').on('click', function() {
    var id = this.id;
    if( $(this).data('checked') ) {
        $(this).prop('checked', false);
        $(this).data('checked', false);
    } else {
        $(this).data('checked', true);
    }
    console.log( id );
    $(':radio[name=' + this.name + ']').not(this).data('checked', false);
});

//another way to re-write the code
$('.option_selector').on('click', function() {
    var id = this.id;
    var waschecked = $(this).data('checked');
    if( waschecked ) {
        $(this).prop('checked', false);
    }
    $(this).data('checked', !waschecked)
    console.log( id );
    $(':radio[name=' + this.name + ']').not(this).data('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' value='1' id='country_1' name='countries' class='option_selector'>
<label for='country_1'>India</label>
<input type='radio' value='2' id='country_2' name='countries' class='option_selector'>
<label for='country_2'>USA</label>
<input type='radio' value='3' id='country_3' name='countries' class='option_selector'>
<label for='country_3'>UK</label>
<br/>
<input type='radio' value='1' id='city_1' name='cities' class='option_selector'>
<label for='city_1'>Jaipur</label>
<input type='radio' value='2' id='city_2' name='cities' class='option_selector'>
<label for='city_2'>Delhi</label>
<input type='radio' value='3' id='city_3' name='cities' class='option_selector'>
<label for='city_3'>Mumbai</label>

这篇关于切换单选按钮检查jQuery中的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！