只选择组中的一个复选框答案

【问题标题】：Select only one checkbox in group只选择组中的一个复选框
【发布时间】：2015-06-06 01:14:20
【问题描述】：

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

这是我的代码 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>

和代码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);
   }
});

任何帮助请。

【问题讨论】：

使用单选按钮，而不是复选框！
@gvee 我需要使用复选框。
注意li 应该是ul 的子元素或ol 元素！
@Vohuman 感谢您的关注。
是允许选中还是取消选中 0 或 1 个复选框？还是在检查单个值后禁用所有其他值？

标签： jquery html

【解决方案1】：

$(function(){
				
		$("input[name='fruit[]']").change(function(e) {
			if($('input[name="fruit[]"]:checked').length==1) {
				$("input[name='fruit[]']:not(:checked)").attr("disabled", true);
			} else {
				$("input[name='fruit[]']:not(:checked)").attr("disabled", false);
			}
		});		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>

</head>
<body>
	<form>		
		
	   <input type="checkbox" name="fruit[]" value="orange"> Orange
       <input type="checkbox" name="fruit[]" value="apple"> Apple
       <input type="checkbox" name="fruit[]" value="grapefruit"> Grapefruit
       <input type="checkbox" name="fruit[]" value="banana"> Banana
       <input type="checkbox" name="fruit[]" value="watermelon"> Watermelon
	   <input type="checkbox" name="fruit[]" value="watermelon"> Papaya 
	</form>
	
</body>
</html>

【讨论】：

它适用于一组复选框，您能否改进您对几组复选框的回答。

【解决方案2】：

单选按钮专为该功能而设计

看看http://www.w3schools.com/html/html_forms.asp

取自链接

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

只要它们共享相同的 name 属性，您就会看到所需的行为。

如果您只想允许选中一个复选框，但允许 0 个值，并且用户取消选中一个值而不检查另一个值，那么您可以这样做：

 $("input:checkbox").on('click', function() {

    var $box = $(this);
    if ($box.is(":checked")) 
    {

    // set all elements matching the name to unchecked        
    $("input:checkbox[name='mobil[1][]']").prop("checked", false)

    // set the orginally checked box back to 'checked'       
    $box.prop("checked", true);
   } 
   else 
   {
      $box.prop("checked", false);
   }
});

【讨论】：

在单选按钮中，您不能取消选中。你应该做出决定。
@ШыназАлиш 添加一个带有 "uncheck" 值的单选输入到组中怎么样？
没错。单选按钮旨在提交一个且仅一个值 - 如果您想在不需要响应的情况下向用户提供选项，请提供“无”或“N.A.”选项。

【解决方案3】：

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

您提供的示例在这里有效。

【讨论】：

我已经将 html 内容包装在一个表单标签中，它仍然对我有用。如果它不适合你，请告诉我。
我已经测试了 Chrome、Firefox 和 IE11 的代码 sn-p。它似乎在所有这些情况下都有效。当你说它不适合你时，你能提供更多关于你的意思的信息吗？
我复制了你的代码，然后粘贴到我的文件中，我的浏览器（Chrome）无法正常工作（
我已将逻辑移动到文档就绪函数中，并将脚本移动到本地脚本块中以简化复制粘贴。如果仍然无法正常工作，我需要您提供有关您所看到的任何错误的更多信息。
对不起，我又给你写信了，但有一个问题。我如何在我的 php 文件中使用 POST：.

【解决方案4】：

使用单选按钮而不是复选框 - 这正是它们的设计目的！

$("#uncheck").click(function() {
  $("input[name=onlyselectone]").prop("checked", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="onlyselectone" value="1"/>1
<br />
<input type="radio" name="onlyselectone" value="2"/>2
<br />
<input type="radio" name="onlyselectone" value="3"/>3
<br />
<input type="button" id="uncheck" value="Uncheck" />

如果需要，添加了一点 JQuery 的 sn-p 以“取消选中”这些值。

【讨论】：

我可以在您的示例中选中其中一个复选框，然后取消选中所有复选框，然后不做决定吗？
@ШыназАлиш 添加了一点 JQuery 来实现该功能。
我应该在复选框中填写）