如何使用标签取消选中jquery中的单选按钮答案

【问题标题】：How to uncheck radio button in jquery using label如何使用标签取消选中jquery中的单选按钮
【发布时间】：2016-12-25 09:16:06
【问题描述】：

我有 3 个带有单选按钮标签的按钮，所以基本上对单选的控制由这 3 个按钮管理。

<input type="radio" name="block_image_checkbox" id="block_image_checkbox_1" value="a">
  <label for="block_image_checkbox_1">
  <div id="block_image_1" class="block_image block_image_hover">
    <div class="block_image_overlay">
            <img src="img/1-1.png" alt="" id="image"/>
    </div>
  </div>
  </label>
  <input type="radio" name="block_image_checkbox" id="block_image_checkbox_2" value="b">
  <label for="block_image_checkbox_2">
    <div id="block_image_2" class="block_image block_image_hover">
      <div class="block_image_overlay">
            <img src="img/2-1.png" alt="" id="image"/>
      </div>
    </div>
  </label>

我使用 jquery 来处理对我的按钮的点击，从而改变它们的视图。我的点击处理程序如下。

$("#block_image_1").click(function() {
    if(!$('.block_image_overlay').hasClass('block_image_overlay_active')){
        $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
        $('.block_image').removeClass('block_image_hover');
    }
    else {
        if($(this).children('.block_image_overlay').hasClass('block_image_overlay_active')){
            $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
            $('.block_image').addClass('block_image_hover');
            $('#block_image_checkbox_1').prop('checked', false);
        }
        else{
            $('.block_image_overlay_active').toggleClass('block_image_overlay_active');
            $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
        }
    }
});

如果我在选中单选按钮时单击它的标签，我想取消选中它。但它不起作用。我想是因为当我尝试取消选中它时，它可能会再次被选中。但是不使用其他按钮有没有解决这种情况的方法？

【问题讨论】：

没有jquery 那里发生了什么？单击图像检查了radio 按钮？ jsfiddle.net/wx38rz5L/2014
您正在使用 for in 标签，该标签将始终检查单选按钮，因此我从我的答案中删除可能是在删除答案后会有所帮助，请检查
但如果我从标签中删除 for 我将无法通过单击不同的标签来切换单选按钮？

标签： javascript jquery html radio-button

【解决方案1】：

您可以为此使用复选框，如果您只想选中一个复选框。你可以写这样的东西

$("input[name='block_image_checkbox']").change(function(){
var curCheckBox = this;
	$("input[name='block_image_checkbox']").each(function(){
		if(this === curCheckBox)
			$(this).attr("checked",true);
		else
			$(this).attr("checked",false);
	});
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="block_image_checkbox_1" name="block_image_checkbox" value="no" />
<label for="block_image_checkbox_1"> checkbox1 </label>
<input type="checkbox" id="block_image_checkbox_2" name="block_image_checkbox" value="yes" />
<label for="block_image_checkbox_2"> checkbox2</label>
<input type="checkbox" id="block_image_checkbox_3" name="block_image_checkbox" value="yes" />
<label for="block_image_checkbox_3"> checkbox3</label>

【讨论】：

我正在尝试使用您的方法，但是由于某种原因，当我取消选中复选框本身时，它会通过您的功能将其重新检查
我使用了你的 jquery 版本，现在可以使用了。谢谢

【解决方案2】：

使用 jquery 取消选中单选按钮：

$(this).prop('checked', false);

注意：如果您使用的是 jQuery

$(this).attr('checked', false);

jQuery .prop()

编辑：请参阅JSFIDDLE中softvar的此示例

你也可以看到这个问题Radio button uncheck on second click

【讨论】：

我已经更新了我的答案，看看这个小提琴是否对你有帮助，并查看我分享的问题的答案。
如果您单击单选按钮本身，它可以工作，是的。但在我的情况下，我需要通过标签取消选中它，它不起作用。

【解决方案3】：

检查这个小提琴它可能对你有用fiddle

<input type="radio" name="block_image_checkbox" id="block_image_checkbox_1" value="a" />
  <label>
  <div id="block_image_1" class="block_image block_image_hover">
    <div class="block_image_overlay">
            <img src="img/1-1.png" alt="" id="image"/>
    </div>
  </div>
  </label>
  <input type="radio" name="block_image_checkbox" id="block_image_checkbox_2" value="b">
  <label>
    <div id="block_image_2" class="block_image block_image_hover">
      <div class="block_image_overlay">
            <img src="img/2-1.png" alt="" id="image"/>
      </div>
    </div>
  </label>

$("#block_image_1").click(function() {
if($('#block_image_1').hasClass('block_image_hover')){
$('#block_image_checkbox_1').prop('checked',true)
$('#block_image_1').removeClass('block_image_hover').addClass('block_image_active');
}else{
$('#block_image_1').removeClass('block_image_active').addClass('block_image_hover');
$('#block_image_checkbox_1').prop('checked',false)
}

});

$("#block_image_2").click(function() {
if($('#block_image_2').hasClass('block_image_hover')){
$('#block_image_checkbox_2').prop('checked',true)
$('#block_image_2').removeClass('block_image_hover').addClass('block_image_active');
}else{
$('#block_image_checkbox_2').prop('checked',false)
$('#block_image_2').removeClass('block_image_active').addClass('block_image_hover');

}

【讨论】：

【解决方案4】：

我刚刚找到了一种解决此问题的方法，但此处尚未提供。您可以使用 DIV 代替 LABEL 并将 JS 附加到其上以模仿标签，如下所示：

HTML：

<input type="radio" name="rooms" id="rooms_1" value="1">
<div class="radio-label" data-for="rooms_1">1</div>

JS：

$('.filter-option').on('click', '.radio-label', function() {
    var forId = $(this).data('for');
    if (!$('#'+forId).prop('checked')) {
        $('#'+forId).prop('checked', true);
    } else {
        $('#'+forId).prop('checked', false);
    }
});

这里是它的一个小提琴：https://jsfiddle.net/yzbvcbo3/2/

【讨论】：