주제와는 거리가 먼 이유로 체크 박스처럼 동작해야하는 2 개의 라디오 버튼 세트가 있습니다. 즉, 라디오 버튼 중 하나는 숨겨지고 다른 하나는 지워질 수 있어야합니다 (실제로 숨겨진 버튼을 확인).
다음과 같이 보입니다.
<ul id="id_member_field_request-demo-1">
<li>
<label for="id_member_field_request-demo-1_0"><input type="radio" name="member_field_request-demo-1" value="Please contact me to schedule a 60 minute, 1-on-1 demo" field_id="8394681" id="id_member_field_request-demo-1_0">Please contact me to schedule a 60 minute, 1-on-1 demo</label>
</li>
<li>
<label for="id_member_field_request-demo-1_1"><input type="radio" name="member_field_request-demo-1" value="false" field_id="8394681" id="id_member_field_request-demo-1_1">false</label>
</li>
</ul>
지금까지 :
var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');
radio2.prop('checked', true).css('display', 'none');
radio1.click(function() {
if(radio1.is(':checked')) {
radio2.click();
}
});
안타깝게도 표시되는 라디오 버튼 ( radio1)을 클릭하면 항상 체크 된 상태로 돌아 오므로 체크 된 상태가 될 수 없습니다. 이전에 선택 했는지 / 선택 취소 했는지 알고 싶습니다 .
이 작업을 수행 할 수있는 유일한 방법은 현재 체크 된 라디오를 변수에 유지 한 다음 거기에서 이동하는 것입니다. 그래서 결국 다음과 같이됩니다.
var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');
radio2.prop('checked', true).parent().css('display', 'block');
var checkedId = radio2.attr('id');
//console.log(checkedId);
radio1.click(function() {
if(checkedId == radio1.attr('id')) {
radio2.prop('checked', true);
checkedId = radio2.attr('id');
} else {
checkedId = radio1.attr('id');
}
});
이것은 작동합니다-더 간단한 방법이 있는지 확인하는 것뿐입니까?
.data()내부 점검 상태 유지를 사용하는 것이 좋습니다 .
var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');
radio2.prop('checked', true).hide();
radio1.prop('checked', true).data('checked', true).show();
radio1.click(function() {
if ($(this).data('checked')) {
$(this).data('checked', false);
radio2.prop('checked', true);
} else {
$(this).prop('checked', true).data('checked', true);
}
console.log("radio1 =", radio1.prop("checked"), "radio2 =", radio2.prop("checked"));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="demo" id="id_member_field_request-demo-1_0" value="0">
<input type="radio" name="demo" id="id_member_field_request-demo-1_1" value="1">이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다