Question

我的计算器有问题，我有五个复选框（costOne，costTwo，costThree，costFour，costFive）

当我检查 costOne 时， costTwo 应该关闭，但是如果我点击 costTwo （然后关闭）那么 costOne 应该关闭。

我的代码只能部分运作：当我点击 costOne 时，您再也无法点击 costTwo （因为它已被禁用），但是当我点击时 costOne 关闭， costTwo 同时开启 - 这正是我想要的。

但我无法点击 costTwo 。

第一次和第三次输入我需要有这种链接行为。

以下是相关代码：

//calculator
var init = $('.switch input').on('click', function() {
    var value1 = 0;
    var value2 = 0;

    var costOne = $("#cost-one"),
        costTwo = $("#cost-three");


    if (costOne.is(':checked')) { 
        costOne.prop("checked", true);
        costTwo.prop("checked", false);
    } else { 
        costOne.prop("checked", false);
        costTwo.prop("checked", true);
    }

    init.filter(':checked').closest('tr').each(function() {
        value1 += (+$(this).find('span.cost-one').text());
        value2 += (+$(this).find('span.cost-two').text());
    });

    $('.counter-one span').eq(0).html(value1 + '&nbsp;');
    $('.counter-two span').eq(0).html(value2 + '&nbsp;');
});

Answer 1

您可以使用此代码（简化以专注于此问题）：

＆＃13;

$('input').on('change', function(){
    var id = $(this).prop('id');
    if (id == 'cost-one' || id == 'cost-three') {
        // Make sure the two have opposite values:
        var other = id == 'cost-one' ? 'cost-three' : 'cost-one';
        $('#'+other).prop("checked", !$(this).prop("checked"));
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
One: <input type="checkbox" id="cost-one"><br>
Two: <input type="checkbox" id="cost-two"><br>
Three: <input type="checkbox" id="cost-three" checked><br>

＆＃13;

其他变量将标识其他复选框的 id ：如果您点击 cost-one ，则会引用成本三，反之亦然。

然后另一个复选框将获得相反的检查状态。

为了保持一致，您还应该检查页面加载中的两个中的一个，因此我为第三个复选框添加了checked属性。

正如评论中所表达的那样，此行为是单选按钮的标准。因此，除非您的库不支持相同的小部件，否则您可以更好地使用它们（对于那些链接的项目）。

Answer 2

试试这个jquery

＆＃13;

<script>
$(document).ready(function(e) {
   $('.example').on('change', function() {
      $('.example').not(this).prop('checked', false);  
   });
});
</script>

＆＃13;

<input class="example" type="checkbox" name="ny">
<input class="example" type="checkbox" name="bos">
<input class="example" type="checkbox" name="sfo">
<input class="example" type="checkbox" name="dc">

＆＃13;

Answer 3

单选按钮已在本地执行，如评论所示：

＆＃13;

<input type=radio name="a">
<input type=radio name="a">

＆＃13;

只需使用相同的name属性。

如果您想允许取消选中，请使用：

＆＃13;

var checked;
$('[name="a"]').on('click', function () {
  if(checked === this) {
    checked = this.checked = false;
  } else {
    checked = this;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=radio name="a">
<input type=radio name="a">

＆＃13;

如果选中一个复选框，如何取消选中另一个复选框？

3 个答案: