Question

我有两个相互排斥的复选框;如果是这样，我希望每个人在做出更改时自动反映另一个的相反状态：如果选中了checkboxA，则复选框B应该是，如果选中，则取消选中（等等，我确定你知道我的意思吗。

我在代码隐藏中创建复选框，如下所示：

ckbxPaymentForSelf = new CheckBox();
ckbxPaymentForSelf.Text = "myself";
ckbxPaymentForSelf.ID = "ckbxPaymentForSelf";
this.Controls.Add(ckbxPaymentForSelf);

ckbxPaymentForSomeoneElse = new CheckBox();
ckbxPaymentForSomeoneElse.Text = "someone else";
ckbxPaymentForSomeoneElse.ID = "ckbxPaymentForSomeoneElse";
this.Controls.Add(ckbxPaymentForSomeoneElse);

基于this，我想也许我可以使用复选框的名称属性并将它们设置为相同的值，例如＆＃34; ckbxsSelfOrSomeoneElse＆＃34 ;但没有＆＃34;名称＆＃34;复选框上的财产可供我使用。

我可以像这样编写一些jQuery（伪脚本）：

$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
    var ckd = this.checked;
    if (ckd) // check ckbxPaymentForSomeoneElse and uncheck if it it's checked
    else // check ckbxPaymentForSomeoneElse and check if it it's unchecked
});

$(document).on("change", '[id$=ckbxPaymentForSomeoneElse]', function () {
    var ckd = this.checked;
    if (ckd) // check ckbxPaymentForSelf and uncheck if it it's checked
    else // check ckbxPaymentForSelf and check if it it's unchecked
});

...但我想知道是否有更明显或更优雅的解决方案，因为这无疑是一个共同的要求。

更新

我试过回答：

$(document).on("click", '[id$=ckbxPaymentForSelf]', function () {
    alert('reached onclick for ckbxpaymentforself');
    $('#ckbxPaymentForSomeoneElse').prop('checked', !this.checked);
});

$(document).on("click", '[id$=ckbxPaymentForSomeoneElse]', function () {
    alert('reached onclick for ckbxpaymentforsomeoneelse');
    $('#ckbxPaymentForSelf').prop('checked', !this.checked);
});

...但是，不合逻辑地（在我看来，显然，他），它不起作用。奇怪/可疑的是警报信息显示两次！我必须点击它们两次以解雇它们。为什么会这样，这可能是一个问题？我注意到jQuery在＆＃34; View Source＆＃34;中出现了两次。当然，它只在实际源代码中的一个位置（在.asxc文件的底部）。

更新2

正如wilusdaman建议的那样（做出答案，Wilus，我会接受它），最常用的方法是使用radiobuttons代替。所需要的只是：

rbPaymentForSelf = new RadioButton();
rbPaymentForSelf.Text = "myself";
rbPaymentForSelf.ID = "rbPaymentForSelf";
rbPaymentForSelf.GroupName = "SelfOfSomeoneElse";
this.Controls.Add(rbPaymentForSelf);

String checkboxPaymentForSomeoneElseText = "someone else";
rbPaymentForSomeoneElse = new RadioButton();
rbPaymentForSomeoneElse.Text = checkboxPaymentForSomeoneElseText;
rbPaymentForSomeoneElse.ID = "rbPaymentForSomeoneElse";
rbPaymentForSomeoneElse.GroupName = "SelfOfSomeoneElse";
this.Controls.Add(rbPaymentForSomeoneElse);

...而且这个jQuery，相关地，然后行动：

/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
        $('[id$=panelSection2]').slideUp();
        $('[id$=panelSection3]').slideUp();
        $('[id$=_MailStopRow]').slideDown();
        $('[id$=_AddressRows]').slideUp();
    }
});

/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("change", '[id$=rbPaymentForSomeoneElse]', function () {
    if (this.checked) {
        $('[id$=panelSection2]').slideDown();
        $('[id$=panelSection3]').slideDown();
        $('[id$=_MailStopRow]').slideUp();
        $('[id$=_AddressRows]').slideDown();
    }
});

但是，如果用户选择＆＃34;其他人＆＃34;应该显示的部分。第一次用户（我现在用户）选择＆＃34;其他人＆＃34;单选按钮 - 随后，它确实有效...

Answer 1

虽然这是一个问题，但您将面临一个问题，因为更改事件将同时触发。这将是一个笛卡尔产品，因为这两个将开始战争。代码将永远改变另一个的状态，或者至少导致不必要的结果。使用点击将是一个更好的解决方案。

$(document).on("change", '#ckbxPaymentForSelf', function () {
        $('#ckbxPaymentForSomeoneElse').prop('checked', !this.checked);
});

$(document).on("change", '#ckbxPaymentForSomeoneElse', function () {
        $('#ckbxPaymentForSelf').prop('checked', !this.checked);
});

我建议如下。 请注意标签以及使用类与id分配事件处理程序：

＆＃13;

    $(document).on("click", '.ckbxPaymentForSelf', function () {
            $('#ckbxPaymentForSomeoneElse').prop('checked', !this.checked);
    });

    $(document).on("click", '.ckbxPaymentForSomeoneElse', function () {
            $('#ckbxPaymentForSelf').prop('checked', !this.checked);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="ckbxPaymentForSelf" class="ckbxPaymentForSelf" type="checkbox" checked/>
    <label class="ckbxPaymentForSelf" for="ckbxPaymentForSelf">Payment For Self</label></br>
<input id="ckbxPaymentForSomeoneElse" class="ckbxPaymentForSomeoneElse" type="checkbox" />
    <label class="ckbxPaymentForSomeoneElse" for="ckbxPaymentForSomeoneElse">Payment For Someone Else</label></br>

＆＃13;

注意：创建控件服务器端时，您可能需要设置

的ClientIDMode =＆＃34;静态＆＃34;

或以这种方式编写脚本：

$('#<%= ckbxPaymentForSomeoneElse.ClientID %>').prop('checked', !this.checked);

脚本中的

以确保引用您的控件

Answer 2

这可以用于项目中的每个实例，您永远不必担心为您要定位的每个选择器混合逻辑。超级可重复使用！

由于click事件发生在客户端，因此有一些jQuery符合您的要求：

$.fn.dependantCheckbox = function() {
  "use strict";
  var $targ = $(this);
  function syncSelection(group, action) {
    $targ.each(function() {
      if ($(this).data('checkbox-group') === group) {
        $(this).prop('checked', action);
      }
    });
  };
  $('input[type="checkbox"][data-checkbox-group]').on('change', function() {
    var groupSelection = $(this).data('checkbox-group');
    var isChecked = $(this).prop('checked');
    syncSelection(groupSelection, isChecked);
  });
}
$('input[type="checkbox"][data-checkbox-group]').dependantCheckbox();

http://codepen.io/nicholasabrams/pen/mJqyqG

Answer 3

我相信使用客户端MVC框架是一个更优雅的解决方案。

例如，在AngularJs中，您可以将视图（两个复选框）绑定到模型，每次更改模型时，您的视图都将按框架更新。

此外，我相信您也可以使用observationCollection在服务器端（https://msdn.microsoft.com/en-us/library/ms668604(v=vs.110).aspx）执行相同操作。

Answer 4

我可以使用以下javascript实现：

<div class="col-12 tooltip">
    <input type="text" required />
    <span>
        <strong>Some text</strong><br />
        <ul>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
        </ul>
    </span>
</div>

如何优雅地获取两个HTML复选框以相互勾选？

更新

更新2

4 个答案: