CodeHoon

안녕하세요 상훈입니다. 

제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다.

html

<input type="radio" name="item" value="1">
<input type="radio" name="item" value="2">
<input type="radio" name="item" value="3">
<input type="radio" name="item" value="4">

이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때,

1. 버튼이 체크 되어있는지 여부 확인하기

const itemChecked = $('input[name=item]').is('checked');

item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다.

 2. 체크 되어있는 값을 가져오기

위를 좀 더 단축하여 사용하겠습니다.

const itemValue = $('input[name=item]:checked').val();

이렇게 item이라는 name 속성을 가진 녀석 중 체크 되어있는 노드의 값을 가져옵니다.

이상입니다.

안녕하세요 상훈입니다.

React로 체크박스 클릭시, text부분의 색을 변경하고 줄을 긋는 기능을 구현하려고합니다.

  <div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    checked : false
                }
                this.handleClick = this.handleClick.bind(this)
            }
            
            render () {
                const textStyle = {
                    color : this.state.checked ? 'blue' : 'red',
                    textDecoration : this.state.checked ? 'line-through' : 'none'
                }
                return (
                    <div>
                        <input type="checkbox" id="checkboxItem"
                            onClick = {this.handleClick} />    
                        <label for="checkboxItem">선택해주세요</label>
                        <h2 style={textStyle}>Text</h2>
                    </div>
                )
            }

            handleClick (event) {
                this.setState ({
                    checked : event.target.checked
                })
            }
        }

        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

render 함수 내의 상수를 선언해놓고 이를 삼항연산자( x ? y : z) 를 사용하여 해당 기능을 구현하였습니다.