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

interact 2 radio buttons 2 different functions Javascript

本文关键字：2个 功能 Javascript 单选按钮 交互      更新时间：2023-09-26

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

这是两个功能的代码：

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);
    });
});

您需要链接单选按钮。您可以通过给它们一个name属性来实现这一点。在这个例子中，我添加了两组单选按钮。我将jQuery函数的选择器更改为在name属性上进行选择。对于多个元素，name属性可以相同，而id属性必须在整个文档中唯一。因此，在使用jQuery选择元素时，您可以利用这一点。

解决方案：

您似乎依赖于收音机的checked属性来切换类。要使一套收音机工作，它们必须按相同的名称分组。

在本例中，background-color在grouped单选按钮之间切换。绿色代表第1组，红色代表第2组。我保留了你的功能，只更改了选择器。这个解决方案中的HTML是用来处理parent().parent()选择的。这也可以改进。jQuery的parent接受选择器。

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);
  });
});
.checked11 {
  background-color: lime;
}
.checked12 {
  background-color: red;
}
<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>

相关文章：