Question

我有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');
        }
    }
});

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

Answer 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>

Answer 2

要使用jquery取消选中单选按钮，请使用：

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

注意：如果您使用的是jQuery＆lt; 1.6使用此：

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

jQuery .prop()

编辑：请参阅JSFIDDLE

中的softvar查看此示例

您还可以看到此问题Radio button uncheck on second click

Answer 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');

}

Answer 4

我刚刚找到了一种方法来解决这个问题，但这里还没有提供。您可以使用DIV代替LABEL并将JS附加到模仿标签的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/

如何使用label取消选中jquery中的单选按钮

4 个答案: