Question

我想知道如何一次只检查一个checkbox，我希望用一个函数来做，而没有radio s，因为它不是我的风格我想去。

我的代码如下：

＆＃13;

function check(c01)
{
  if((this).is(":checked") == true)
  {
    c02 = false;
  }
}

＆＃13;

<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(c01);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No"  onclick= "check(c02);" />No'

＆＃13;

Answer 1

究竟单选按钮的用途，如果它只是关于样式使用复选框样式的单选按钮，所以你不需要添加额外的js代码，请查看下面的示例。

希望这有帮助。

＆＃13;

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

＆＃13;

<input type="radio" name="creditCheck" id="c01" value="Yes" checked/>Yes
<input type="radio" name="creditCheck" id="c02" value="No" />No

＆＃13;

Answer 2

以下是另一个如何执行此操作的示例：

$('input[name="creditCheck"]').on('click', function(e) {
  $('input[name="creditCheck"]').prop('checked', false);
  $(this).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No

Answer 3

这是一个没有JQuery的例子。在输入中添加一个类。单击时，取消选中所有内容，然后检查单击的输入（如果未选中）。

＆＃13;

    function check(input)
    {
    	
    	var checkboxes = document.getElementsByClassName("radioCheck");
    	
    	for(var i = 0; i < checkboxes.length; i++)
    	{
    		//uncheck all
    		if(checkboxes[i].checked == true)
    		{
    			checkboxes[i].checked = false;
    		}
    	}
    	
    	//set checked of clicked object
    	if(input.checked == true)
    	{
    		input.checked = false;
    	}
    	else
    	{
    		input.checked = true;
    	}	
    }

＆＃13;

<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes     
<input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No"  onclick= "check(this);" />No'

＆＃13;

Answer 4

只是一个有效的例子，随意改进解决方案：

＆＃13;

$("#c01").click(function(){
	if($("#c01").is(':checked'))
  	$("#c02").prop("checked", false);
});

$("#c02").click(function(){
	if($("#c02").is(':checked'))
  	$("#c01").prop("checked", false);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No

＆＃13;

Answer 5

对于非常简单的用例，只有两个复选框可以切换，我会按如下方式进行：

function check(checkbox)
{
  var uncheck = checkbox.id === 'c01' ? 'c02' : 'c01';
  $('#' + uncheck).prop('checked', false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No"  onclick= "check(this);" />No

Answer 6

如果我理解得很好：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
   	<input type="checkbox" name="creditCheck" value="Yes" />Yes
	<input type="checkbox" name="creditCheck" value="No" />No

<script type="text/javascript">
    function getCheckboxes() {
        return document.querySelectorAll('input[type=checkbox]');
    }

    function uncheckAllCheckboxes() {
        var checkboxes = getCheckboxes();

        for (var i = 0, length = checkboxes.length; i < length; i++) {
            checkboxes[i].checked = false;
        }
    }

    function manageClick() {
        uncheckAllCheckboxes();

        this.checked = true;
    }

    function init() {
        var checkboxes = getCheckboxes();

        for (var i = 0, length = checkboxes.length; i < length; i++) {
            checkboxes[i].addEventListener('click', manageClick);
        }
    }

    init();
</script>
</body>
</html>

如何一次只选中一个复选框？

6 个答案: