레이블을 두 번 클릭하면 레이블이 표시됩니다.

레이블을 클릭하여 함수를 호출하고 동시에 라디오 버튼에 효과를 저장하는 방법은 무엇입니까?레이블을 두 번 클릭하면 레이블이 표시됩니다.

예 (나는 라디오 버튼의 레이블을 클릭하여 체크 박스와 열기/닫기 필드 셋 필요)

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Click on Label</title>
 
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(document).ready(function(){ 
 
accordionOptions();
 
}); 
function accordionOptions(){
 
$("label.legend, label.childless").click(function(event){
 
var opposites = $(".subtype").not($(this).next());
 
var el = $(this);
 
opposites.find("input:checked").attr('checked', false);
 
opposites.removeClass("expanded");
 
el.siblings("label").removeClass("expanded");
 
el.next(".subtype").toggleClass("expanded");
 
el.toggleClass("expanded");
 
}); 
 
}
 
</script>
 
<style type="text/css">
 
<!--
 
HTML { text-align: center}
 
BODY { background: #FFF; color: #494949; font: .813em/140% Arial, Helvetica, sans-serif; text-align: left; margin: 4em auto; width: 240px}
 
LABEL { display: block; margin-bottom: .6em}
 
.subtype { display: none}
 
.expanded { display: block !important}
 
.label.expanded { /*styling selected fieldset heading*/}
 
-->
 
</style>
 
</head> 
<body>
 
<form action="" method="post">
 
<fieldset>
 
<label class="legend expanded"><input name="rb_item" type="radio" value="" checked="checked" />Item 0100</label>
 
<fieldset class="subtype expanded">
 
<label><input name="item01" type="checkbox" value="" />Item 0101</label>
 
<label><input name="item01" type="checkbox" value="" />Item 0102</label>
 
</fieldset>
 
<label class="childless"><input name="rb_item" type="radio" value="" />Item 0200</label>
 
<label class="legend"><input name="rb_item" type="radio" value="" />Item 0300</label>
 
<fieldset class="subtype">
 
<label><input name="item03" type="checkbox" value="" />Item 0301</label>
 
<label><input name="item03" type="checkbox" value="" />Item 0302</label>
 
</fieldset>
 
<button type="submit">Submit</button>
 
</fieldset>
 
</form>
 
</body>
 
</html>

출처

2009-08-03 Vladimir

사용'$()의 변화()'.. '라디오 버튼 || 체크 박스를 누르면'change-event'가 실행됩니다. 그러니'클릭 이벤트 '를 고치려고하지 말고 그냥'change event'를 사용하십시오 – DomeTune

- $("label.legend, label.childless").click(function(event){ 
+ $("label, input").click(function(event){

... 그리고 일부 화장품 장소에서 무선 레이블을 유지합니다.

출처

2009-08-03 19:59:50

감사합니다, Andrejs. 멋진 솔루션입니다. 그러나이 경우 레이블 및 다음 fieldset.subtype의 속성 toggleClass는 아무 효과가 없습니다. .expanded 클래스 (예 : .expanded {display : block! important, background : #FCC})에 새로운 디자인 규칙을 추가하면 분명합니다. – Vladimir

대신 라디오 버튼의 포커스 이벤트를 사용하십시오.

이 시도 : 인 addClass에 대한 toggleClass 교환

$("label.legend, label.childless").click(function(event){ 
    var opposites = $(".subtype").not($(this).next()); 
    var el = $(this); 
    opposites.find("input:checked").removeAttr('checked'); 
    opposites.removeClass("expanded"); 
    el.siblings("label").removeClass("expanded"); 
    el.next(".subtype").addClass("expanded"); 
    el.toggleClass("expanded"); 
});

그건 :

<script type="text/javascript"> 
    $(function(){ 
     accordionOptions(); 
    }); 
    var accordionOptions = function(){ 
     $("label.legend > input, label.childless > input").focus(function(event) { 
      var el = $(this).parent(); 
      var opposites = $(".subtype").not(el.next()); 
      opposites.find("input:checked").attr("checked", false); 
      opposites.removeClass("expanded"); 
      el.siblings("label").removeClass("expanded"); 
      el.next(".subtype").toggleClass("expanded"); 
      el.toggleClass("expanded"); 
     }); 
    } 
</script>

출처

2009-08-04 03:12:30

감사합니다. Jason. 이전 솔루션에 대해 reoly를 반복합니다. label 및 next fieldset.subtype의이 대소 문자 속성 toggleClass는 아무런 효과가 없습니다 .expanded 클래스 (예 : .expanded {display : block! important, background : #FCC})에 새 디자인 규칙을 추가하면 분명합니다. – Vladimir

이 내 말에 작동합니다.

출처

2009-12-08 11:12:15 Eivind

e.preventDefault();의 문제점은 라디오 버튼을 확인하는 것에서 레이블 클릭을 중지하는 것입니다.

더 나은 해결책은 이렇게 같은 "체크"빠른 검사를 추가하는 것입니다 :

$("label").click(function(e){ 
    var rbtn = $(this).find("input"); 
    if(rbtn.is(':checked')){ 
    **All the code you want to have happen on click** 
    } 
)};

출처

2013-01-05 23:17:04 yoshyosh

와우 이걸 주셔서 감사합니다! – chris

레이블을 두 번 클릭하면 레이블이 표시됩니다.

답변

관련 문제