在组中只选择一个复选框 [英] Select only one checkbox in group

问题描述

我需要在 html 中只选择一组中的一个复选框.我找到了我的例子.但我无法意识到.它不起作用.这是我的示例:示例

这是我的 HTML 代码:

 
<li><div class="radio"><标签><input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется
<li><div class="radio"><标签><input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется

<div>

和代码jquery:

$("input:checkbox").on('click', function() {//在处理程序中，'this' 指的是点击的框var $box = $(this);如果 ($box.is(":checked")) {//使用 .attr() 方法检索框的名称//因为它被假定和预期是不可变的var group = "input:checkbox[name='" + $box.attr("name") + "']";//另一方面，组/框的选中状态会改变//并且使用 .prop() 方法检索当前值$(group).prop("checked", false);$box.prop("checked", true);}别的 {$box.prop("checked", false);}});

任何帮助请.

解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><脚本>$(函数(){$("input:checkbox").on('click', function() {//在处理程序中，'this' 指的是点击的框var $box = $(this);如果 ($box.is(":checked")) {//使用 .attr() 方法检索框的名称//因为它被假定和预期是不可变的var group = "input:checkbox[name='" + $box.attr("name") + "']";//另一方面，组/框的选中状态会改变//并且使用 .prop() 方法检索当前值$(group).prop("checked", false);$box.prop("checked", true);} 别的 {$box.prop("checked", false);}});});<表格><div><li><div class="radio"><标签><input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется

<li><div class="radio"><标签><input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имется

<div>

您提供的示例可在此处使用.

I need in html select only one checkbox in a group. I find my example. But I can't realize it. It doesn't works. Here is my example: example

Here is my code HTML:

    <div>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">
                    Сотовый телефон имеется
                    </label>
                </div>
            </li>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">
                    Сотовый телефон не имеется
                    </label>
                </div>
            </li>
    <div>

And code jquery:

$("input:checkbox").on('click', function() {
        // in the handler, 'this' refers to the box clicked on
        var $box = $(this);
        if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
   } 
   else {
        $box.prop("checked", false);
   }
});

Any help plz.

解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("input:checkbox").on('click', function() {
      // in the handler, 'this' refers to the box clicked on
      var $box = $(this);
      if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }
    });
  });
</script>
<form>
  <div>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется
        </label>
      </div>
    </li>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется
        </label>
      </div>
    </li>
    <div>
</form>

Your provided sample works here.

这篇关于在组中只选择一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！