Javascript/JQuery 设置复选框的值，同时禁用其他复选框

Question

我正在想办法。我有几个采用以下形式的复选框

<div class="checkbox">
  <input name="someName1" class="checkbox styled" id="checkbox1" onclick="document.controller.setValue('/@someName1', this.checked ? '1' : '', 'someName1');" type="checkbox" value="" />
  <label for="checkbox1"> SomeName 1 </label>
</div>

<div class="checkbox">
  <input name="someName2" class="checkbox styled" id="checkbox2" onclick="document.controller.setValue('/@someName2', this.checked ? '1' : '', 'someName2');" type="checkbox" value="" />
  <label for="checkbox2"> SomeName 2 </label>
</div>

需要 Controller 来设置我正在使用的某些系统中的值。现在上面的内容似乎有效，如果我检查两者，它们都会记录在我的系统中。如果我选中一个然后取消选中它，则不会记录它。

问题的出现是因为我只希望他们能够选择一个选项(我知道单选按钮就是用于此目的，但我需要使用复选框)。

所以我有以下内容

$('input.styled').on('change', function() {
    $('input.styled').not(this).prop('checked', false);  
});

这可以确保只选择一个。但是，由于 onclick 事件，如果我选中一个复选框并选中另一个复选框(然后上面的代码会关闭第一个复选框)，则两个复选框都会在我的系统中记录为已选中。

因此，我认为我需要对 onclick 事件执行一些操作，以便在不再选中该复选框时以某种方式将其关闭。

我正在考虑做类似以下的事情

$('.checkbox').change(function() {
    if($(this).is(":checked")) {
        $value = $(this).attr("name");
       document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
    }   
});

因此，如果复选框被选中，则将 setValue 函数应用于 name 属性选中它的复选框。如果未选中，我需要以某种方式扭转这一情况。

我该如何去做这样的事情？

谢谢

Answer 1

您可以更改此设置

   $('.checkbox').change(function() {
        if($(this).is(":checked")) {
            $value = $(this).attr("name");
           document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
        }   
    });

到此

    $('.checkbox').change(function() {
      $(".checkbox:checkbox:not(:checked)").each(function( index ) {
        $value = $(this).attr("name");
        document.controller.setValue('/@'+$value,'', 'checkbox');
      });
      if($(this).is(":checked")) {
        $value = $(this).attr("name");
        document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
      }   
    });

在为选中的项目设置值之前，您将重置所有未选中的项目。