0

表单上有一组或多组单选按钮。该值可以从 ^ 的值开始。一旦选择了另一个值， ^ 就不再可行，所以它的 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页面上只能有一个。jQuery 假设了这一点，并且只会选择您的一个单选按钮，因此永远不会找到任何值为 '^' 的单选按钮。

只需将其更改为一个类，它就可以工作（或使用其他类型的标识 - 比如name）

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

你也可以选择使用 CSS 选择器：

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

您绝对应该修复多个 id 问题，这是无效的 HTML，可能导致不希望的和意外的行为（正如其他人已经提到的）。

但是，以下内容不使用 id 选择，并且当任何其他同级发生更改时，将隐藏组中的最后一个 <input>value = ：^

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

问题中的原始代码不起作用，因为$this未定义。我认为您可能是$(this)为了将本机对象包装在 jQuery 中。这些类型的错误通常显示在浏览器的控制台或对话框中，并且是调试 JavaScript 时首先要查看的地方。

于 2012-06-13T21:29:16.660 回答