라디오 버튼 수정 - ladio beoteun sujeong

<input type="radio" id="typeA" name="radio_name" value="A"><label for="typeA">Type A</label>
<input type="radio" id="typeB" name="radio_name" value="B" checked><label for="typeB">Type B</label>

■ 선택된 radio 버튼 value 값 가져오기

var tmp_value = $('input:radio[name=radio_name]:checked').val();
console.log(tmp_value);	// B

■ radio 버튼 선택값 설정/변경하기 

// radio_name 이라는 name을 가진 라디오 버튼 중 A라는 value 를 가지고 있는 라디오 버튼 선택/해제
$('input:radio[name=radio_name]:input[value="A"]').attr("checked", true);	// 선택	
$('input:radio[name=radio_name]:input[value="A"]').attr("checked", false);	// 해제

또는

$('input:radio[name=radio_name]:input[value="A"]').prop("checked", true);	// 선택	
$('input:radio[name=radio_name]:input[value="A"]').prop("checked", false);	// 해제

HTML에 배치한 Radio 버튼이 실시간으로 사용자에 의해 눌릴 때마다

변경된 Radio 버튼의 value 값을 읽어오는 script를 작성해 보도록 하겠습니다

Radio 버튼 구성

<div style="margin-top:5px">
        <input type='radio' name='sensorDa' value='3'/>Push&nbsp;
        <input type='radio' name='sensorDa' value='4'/>Interval&nbsp;
        <input type='radio' name='sensorDa' value='5'/>On/Off&nbsp;
</div>

먼저 value값을 읽을 라디오 버튼을 위와 같이 구성하였습니다

하나의 라디오 그룹으로 묶기 위해 동일한 name인 sensorDa를 설정해 주고

그에 따른 value값을 3,4,5로 지정해 주었습니다

Radio 변경 감지

<script>
$('input[name="sensorDa"]').change(function(){
        var value = $(this).val();
        var checked = $(this).prop('checked');
        confirm(value);
});
</script>

소스코드 자체는 어렵지 않습니다

먼저 input 타입의 sensorDa라는 name을 가진 라디오 버튼이 change 될 때마다 function을 실행한다는 뜻입니다

이렇게 실행된 function 내부에서는 this 즉 sensorDa의 val() 값을 가져오게 됩니다

마지막으로 confirm을 통해서 해당 value값을 띄워주게 되면

라디오 버튼을 누를 때마다 팝업창이 뜨면서 선택된 value 값을 출력합니다

여기에서 응용하여 만약 Radio 버튼의 value가 3일 경우에는 입력 텍스트를 비활성화하고

그렇지 않을 경우에만 활성화한다는 조건의 프로그램을 만들 수도 있습니다

<script>
$('input[name="sensorDa"]').change(function(){
        var value = $(this).val();
        var checked = $(this).prop('checked');
        if(value=='3'){
                document.getElementById('sensorDc').disabled=true;
                document.getElementById('sensorUn').disabled=true;
        }else{
                document.getElementById('sensorDc').disabled=false;
                document.getElementById('sensorUn').disabled=false;
        }
});
</script>

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다.

그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만

input의 기본 color는 원래 css로 변경이 불가능했다.

checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데 

최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다.

🎨css accent-color

accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다.

기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고

가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다.

💜해당 기능 지원 가능 브라우저

현재는 각 브라우저 최신 버전에서만 지원이 가능하며,

구 internert Explorer에서만 지원이 되지 않는다.

최신 버전 브라우저에서만 지원이 되기 때문에

불특정 다수에게 서비스하는 프로그램에서는 아직 사용하기에는 어려울 듯하다.

❤️예시 코드

:root {
	accent-color: red;
    accent-color:#5729e9;
    accent-color: rgb(0,200,0);
    accent-color: hsl(228,4%,24%);
}

accent-color요소를 :root에 적용을 하면 모든 요소의 컬러를 한 번에 변경을 할 수 있다.

accent-color가 적용되는 HTML요소는 총 4가지이다.

• checkbox
• radio
• range
• progress

accent-color에 들어가는 값은 색상을 지정해주는 코드로 사용할 수 있다.

💚accent-color 선택자로 나눠주기

 input[type=checkbox], input[type=radio] {
    accent-color:red;
}
input[type=range], progress{
    accent-color:black;
}

선택자를 이용하면 요소 별로도 색상 지정이 가능하다.