1

関数を呼び出し、同時にラベルをクリックしてラジオボタンの効果を保存する方法はありますか?

例 (ラジオボタンのラベルをクリックして、チェックボックス付きのフィールドセットを開閉する必要があります)

<!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>ラベルをクリック</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反対 = $(".subtype").not($(this).next()); 

var el = $(この);

反対者.find("入力: チェック済み").attr('チェック済み', false);

反対者.removeClass("拡張"); 

el.siblings("ラベル").removeClass("拡張済み") ; 

el.next(".subtype").toggleClass("拡張"); 

el.toggleClass("拡張"); 

}); 

} 

</script> 

<style type="text/css"> 

<!-- 

HTML { text-align: center} 

BODY { background: #FFF; 色: #494949; フォント: .813em/140% Arial、Helvetica、sans-serif; テキスト整列: 左; マージン：4em 自動; 

幅: 240px} LABEL {表示: ブロック; margin-bottom: .6em}

.subtype { display: none} 

.expanded { display: block !important} 

.label.expanded { /*選択したフィールドセットの見出しのスタイリング*/} 

--> 

</style> 

</head>


<body> 

<form action="" method="post"> 

<fieldset> 

<label class="legend expand"><input name="rb_item" type="radio" value="" checked="checked" />アイテム 0100</label> 

<fieldset class="subtype expand"> 

<label><input name="item01" type="checkbox" value="" />Item 0101</label> 

<label><input name=" item01" type="checkbox" value="" />アイテム 0102</label> 

</fieldset> 

<label class="childless"><input name="rb_item" type="radio" value="" />Item 0200</label> 

<label class="凡例"><input name="rb_item" type="radio" value="" />Item 0300</label> 

<fieldset class="subtype"> 

<label><input name="item03" type="checkbox" value="" />アイテム 0301</label>

<label><input name="item03" type="checkbox" value="" />アイテム 0302</label> 

</fieldset> 

<button type="submit">送信</button> 

</fieldset> 

</フォーム> 

</body>

</html>
4

4 に答える 4

2

代わりに、ラジオ ボタンでフォーカス イベントを使用してください。

これを試して：

<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-04T03:12:30.570 に答える
0 
- $("label.legend, label.childless").click( function(event){
+ $("label, input").click( function(event){

...そして、ラジオのラベルを固定するための化粧品。

于 2009-08-03T19:59:50.453 に答える
0

これは私の最後に機能します：

$("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");
});

それはaddClassのtoggleClassを交換しています。

于 2009-12-08T11:12:15.867 に答える