Question

我有两个单选按钮，我已使用label更改为可点击的图像，效果很好。问题是，当选中一个标签时，第二个标签不会被取消选中。

以下是2个函数的代码：

＆＃13;

var $radioButtons = $('input[value="2"]');
$radioButtons.click(function() {
    $radioButtons.each(function() {
        $(this).parent().parent().toggleClass('checked11', this.checked);
    });
});
    
    var $2radioButtons = $('input[value="5"]');
$2radioButtons.click(function() {
    $2radioButtons.each(function() {
        $(this).parent().parent().toggleClass('checked12', this.checked);
    });
});

＆＃13;

Answer 1

您需要互连单选按钮。您可以通过为其提供name属性来执行此操作。在示例中，我添加了两组单选按钮。我更改了jQuery函数的选择器以在name属性上进行选择。对于与整个文档中必须唯一的name属性相矛盾的多个元素，id属性可以相同。因此，在使用jQuery选择元素时，您可以使用它。

解决方案：

您似乎依赖无线电的checked属性来切换类。要使一组无线电工作，必须使用相同的名称进行分组。

在此示例中，background-color在grouped单选按钮之间切换。第1组为绿色，第2组为红色。我的功能完好无损，只更改了选择器。此解决方案中的HTML可用于处理您选择的parent().parent()。这也可以改进。 jQuery＆＃39; parent接受选择器。

＆＃13;

var $radioButtons = $('input[name="radiogaga"]');
$radioButtons.click(function() {
  $radioButtons.each(function() {
    $(this).parent().parent().toggleClass('checked11', this.checked);
  });
});

var $2radioButtons = $('input[name="radioblabla"]');
$2radioButtons.click(function() {
  $2radioButtons.each(function() {
    $(this).parent().parent().toggleClass('checked12', this.checked);
  });
});

＆＃13;

.checked11 {
  background-color: lime;
}
.checked12 {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <span> 
  <label for="radio1" >This is radio 1</label>
  <input name="radiogaga" value="2" type="radio" id="radio1" />  
</span>
</div>
<div>
  <span>
  <label for="radio2" >This is radio 2</label>
  <input name="radiogaga" value="3" type="radio" id="radio2" />
    </span>
</div>

<div>

  <span> 
  <label for="radio3" >This is radio 3</label>
  <input name="radioblabla" value="4" type="radio" id="radio3" />  
</span>
</div>
<hr>
<div>
  <span>
  <label for="radio4" >This is radio 4</label>
  <input name="radioblabla" value="5" type="radio" id="radio4" />
    </span>
</div>

＆＃13;

互动2个单选按钮2个不同的功能Javascript

1 个答案: