ラジオボタンをチェックしている時と、していない時のcssの切り替え

#解決したいこと
ラジオボタンをチェックしている時は、背景色が黄色
チェックしていない時は、背景色が青色
というようにしたいです。
それと、:hover状態を保ったままで動作させたいです。

html
1<div class="bg-color">
2   <label><input type="radio">ラジオボタン</label>
3</div>

css
1.bg-color {
2   background-color: blue;
3}
4.bg-color:hover {
5   background-color: yellow;
6}

jQuery
1$(function(){
2   $('input[type="radio"]').change(functin(){
3      var $check = $("input:checked").parents(".bg-color");
4      if($(input:checked)){
5         $check.css({'background','yellow'});
6      } else {
7         $(this).parents(".bg-color").css({'background','blue'});
8      }
9   });
10});

行動規範の内容に同意します

回答2件

html
1<!DOCTYPE html>
2<html ng-app="myApp">
3<head>
4<body ng-controller="MyController">
5
6  <div class="bg-color" ng-style="myProp">
7    <label><input type="radio" name="back" ng-click="myProp={backgroundColor:'white'}">背景白</label>
8    <label><input type="radio" name="back" ng-click="myProp={backgroundColor:'blue'}">背景青</label>
9  </div>
10
11  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
12  <script>
13  angular.module('myApp', [])
14  .controller('MyController', ['$scope', function($scope) {
15  }]);
16  </script>
17</body>
18</html>

投稿2017/04/23 03:48

yuki84web

総合スコア1857

kotori_00

2017/04/23 04:09

ご回答ありがとうございます。 ng-controllerについてとても勉強になりました。使用したことがないので、これから取り入れて勉強していきたいと思います。

行動規範の内容に同意します

ベストアンサー

HTML
1<div class="bg-color">
2	<label><input type="radio" name="n">ラジオボタン</label>
3</div>
4<div class="bg-color">
5	<label><input type="radio" name="n">ラジオボタン</label>
6</div>

CSS
1.bg-color {
2	background-color: blue;
3}
4.bg-color.ck,
5.bg-color:hover {
6	background-color: yellow;
7}

JavaScript
1$( function() {
2	$( 'input[type="radio"]' ).on( 'change', function() {
3		var $check = $( this ).parents( '.bg-color' );
4		$( '.bg-color' ).removeClass( 'ck' );
5		if ( $( this ).prop( 'checked' ) ) {
6			$check.addClass( 'ck' );
7		}
8	} );
9} );
10```**動くサンプル：**[https://jsfiddle.net/96vkdj0h/](https://jsfiddle.net/96vkdj0h/)