Question

好吧可能很简单，但我怎样才能只选中一个复选框呢？这是我的复选框

<label class="checkbox-inline">
      <input type="checkbox" name="skills" id="radio" value="1"> 1
</label>
<label class="checkbox-inline">
      <input type="checkbox" name="skills" value="2"> 2
</label>
<label class="checkbox-inline">
      <input type="checkbox" name="skills" value="3"> 3
</label>

我用它来制作动画的JS

$(function() {

$('input[type=checkbox]').each(function() {
    var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
    if ($(this).is(':checked')) {
        span.addClass('checked');
    }
    $(this).wrap(span).hide();
});

function doCheck() {
    if ($(this).hasClass('checked')) {
        $(this).removeClass('checked');
        $(this).children().prop("checked", false);
    } else {
        $(this).addClass('checked');
        $(this).children().prop("checked", true);
    }
}

function doDown() {
    $(this).addClass('clicked');
}

function doUp() {
    $(this).removeClass('clicked');
}
});

目前我可以查看多个复选框。 Here is quick JSFIDDLE

Answer 1

<input type="radio" />

如果您真的想要复选框样式，请将输入更改为无线电并编辑css，使其成为方形。你可以完全使用javascript控制有多少被勾选等等运行它，但是如果它已经存在，没有必要不使用它/从头创建它;）

取消选中无线电： http://jsfiddle.net/6Mkde/

Answer 2

试试这个，

$(document).ready(function(){


  $('[type="checkbox"]').change(function(){
  
    if(this.checked){
       $('[type="checkbox"]').not(this).prop('checked', false);
    }    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" id="radio" value="1">1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" value="2">2
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="skills" value="3">3
</label>

一次只能检查一个复选框

2 个答案: