0

フォームには、1つ以上のラジオボタンのグループがあります。値は^の値で始まる可能性があります。別の値を選択すると、^は実行できなくなるため、divを非表示にする必要があります。ソースとhtml、およびjsfiddleのリンクは次のとおりです。http://jsfiddle.net/RSNxS/

$(function(){

    $('.tristateRadio').bind("change", handleTristateRadioChange);

    function handleTristateRadioChange(e) {
        var button = $this;
        var id = button.id();

        $("#"+id).filter(
            function(){ this.value == "^"}
        ).parent().hide();
    }
});

html

$<div class="questionItem">
    <h3>C0900A</h3>
Staff asmt mental status: recall current season <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900B</h3>
Staff asmt mental status: recall location of room <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900C</h3>
Staff asmt mental status: recall staff names/faces <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900D</h3>
Staff asmt mental status: recall in nursing home <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900Z</h3>
Staff asmt mental status: none of above recalled <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>
4

3 に答える 3

2

あなたのコードはあらゆる種類の壊れています:

  • 暗黙の$this変数はありません
  • .id()機能はありません
  • ifステートメントを使用できる場合は、idセレクターで選択されたjqueryオブジェクトをフィルター処理する必要はありません。
  • 他の誰かが指摘したように、DOM IDは一意である必要があるため、コードにあるIDセレクターを残しておくと、2/3の確率で誤った要素が選択されます。
  • 現在の要素がthis
  • $nitpick:読みやすくするためのjqueryオブジェクトであるプレフィックス変数

編集:私のコードは最悪です、私はあなたにコメントだけを残します

于 2012-06-13T21:23:25.450 に答える
1

複数のIDの問題を確実に修正する必要があります。これは、無効なHTMLであり、望ましくない予期しない動作を引き起こす可能性があります(他の人がすでに述べたように)。

ただし、以下はidによる選択を使用せず、他の兄弟のいずれかが変更された場合、グループ内のvalue=の最後を非表示にします。 <input>^

$('.tristateRadio').bind('change', function() {
    $(this).parent().siblings(':last').hide();
});

$thisが未定義であるため、質問の元のコードは機能していません。$(this)おそらく、ネイティブオブジェクトをjQueryでラップすることを意味していると思います。これらの種類のエラーは通常、ブラウザのコンソールまたはダイアログに表示され、JavaScriptをデバッグするときに最初に確認する場所です。

于 2012-06-13T21:29:16.660 に答える
1

id1ページに1つしか存在できないため、機能しません。jQueryはこれを想定しており、ラジオボタンの1つのみを選択するため、値が「^」のボタンは見つかりません。

クラスに変更するだけで機能します(または他の種類のIDを使用します-のようにname

$("."+theClass).filter(
    function(){ this.value == "^"}
).parent().hide();

CSSセレクターを使用することもできます。

$("."+theClass+"[value='^']").parent().hide();
于 2012-06-13T21:20:36.120 に答える