Question

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

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我点击单选按钮会检查其初始状态，因此将取消选中最终状态。但是，我无法让它以理想的方式运作。

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

编辑 - 1：它可能与所述问题重复，也可能不重复。但是，上述问题的解决方案是基于“以其名称取消选择的无线电组”，而这并不能解决我的问题。

Answer 1

您将合并click事件并使用data-attribute来跟踪单选按钮的状态：

$('.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>

Answer 2

我认为，您唯一需要做的就是检查是否已选中。不要包含else语句。

if($(this).is(':checked')) $(this).prop('checked', false);

Answer 3

你也可以像这样使用attr：

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

http://jsfiddle.net/sandenay/mqpqgfL3/

切换单选按钮检查jQuery中的状态

3 个答案: