Question

我需要在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);
   }
});

任何帮助PLZ。

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

Answer 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);
   }
});

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

您提供的示例适用于此处。

Answer 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来“取消选中”这些值。

在组中仅选择一个复选框

4 个答案: