HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>单选/复选/开关的选中和取消 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>单选/复选/开关的选中和取消</h4></div>
        <div class="card-body">
          
          <p>实际应用中，有很多小伙伴会用到js来操作选中复选框等的操作，但不少小伙伴不知道怎么用，平时我们在操作的时候，都是用的attr，但因为input在咋们的美化中是被隐藏的，这里应该采用prop来设置checked即可。</p>
          <div class="form-group">
            <label class="lyear-radio radio-inline radio-primary">
              <input type="radio" name="a" value="羽毛球"><span>羽毛球</span>
            </label>
          </div>
          
          <div class="form-group">
            <label class="lyear-checkbox checkbox-inline checkbox-primary">
              <input type="checkbox" name="b" value="篮球"><span>篮球</span>
            </label>
          </div>
          <div class="form-group">
            <label class="lyear-switch switch-primary">
              <input type="checkbox" name="c" value="on">
              <span></span>
            </label>
          </div>
          
          <div class="form-group">
            <button class="btn btn-default" id="checked">全部选中</button>
            <button class="btn btn-default" id="notchecked">取消选中</button>
            <button class="btn btn-default" id="getchecked">获取值</button>
          </div>
          
          <pre class="m-t-10" id="console"></pre>
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
</body>
</html>
CSS

  

  

    
JavaScript

    
$(document).ready(function() {
    $('#checked').click(function() {
        $('.lyear-radio').find('input[type="radio"]').prop('checked', true);
        $('.lyear-checkbox').find('input[type="checkbox"]').prop('checked', true);
        $('.lyear-switch').find('input[type="checkbox"]').prop('checked', true);
    });
  
    $('#notchecked').click(function() {
        $('.lyear-radio').find('input[type="radio"]').prop('checked', false);
        $('.lyear-checkbox').find('input[type="checkbox"]').prop('checked', false);
        $('.lyear-switch').find('input[type="checkbox"]').prop('checked', false);
    })
  
    $('#getchecked').click(function() {
        var $radio = $('input[name="a"]:checked').val();
        var $checkbox = $('input[name="b"]:checked').val();
        var $switch = $('input[name="c"]:checked').val();
        
        $('#console').append($radio+'\n'+$checkbox+'\n'+$switch+'\n');
    })
});