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

Javascript/JQuery setting value of checkbox while disabling others

本文关键字：复选框 其他 JQuery 设置 Javascript      更新时间：2023-09-26

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

<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>

控制器需要在我正在使用的某个系统中设置值。现在以上似乎都起作用了，如果我检查两者，它们都会记录在我的系统中。如果我选中一个，然后取消选中它，它就不会被记录。

问题来了，因为我只想让他们能够选择一个选项（我知道单选按钮是这样的，但我需要使用复选框）。

所以我有以下

$('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函数应用于名称属性选中它的复选框。如果未选中，我需要以某种方式扭转这种情况。

我该怎么做这样的事？

感谢

您可以更改此

   $('.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');
      }   
    });

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

我认为这就是您所需要的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
  checkbox2radio('.checkbox');
  checkbox2radio('.hamlet');
  function checkbox2radio(selector) {
    $(selector).on('change', function(e) {
      var checked = this.checked;
      var index = $(selector).index(this);
      if (checked) {
        $(selector).each(function(i) {
          if(i == index) {
          }
          else {
            $(selector).eq(i).removeAttr('checked');
          }
        });
      }
    });
  }
})
</script>
<input type="checkbox" class="checkbox"> Foo<br>
<input type="checkbox" class="checkbox"> Bar<br>
<input type="checkbox" class="checkbox"> Hello<br>
<input type="checkbox" class="checkbox"> World<br>
<hr>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>
<input type="checkbox" class="hamlet"> or<br>
<input type="checkbox" class="hamlet"> not<br>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>
相关文章：