javascript - 除了第一行之外，将类添加到 Label Works

Question

我有一个简单的表格，其中包含一系列是/否单选按钮问题，并添加了一些 Javascript，应该将红色应用于相邻文本区域输入的标签。它有效，但不适用于表格中的第一行 - 所有其他行都有效。

这是表中前 3 行的 html 的简化版本:

<table width="71%" class="record">

    <tr>
      <td width="63%" valign="top" class="field_name_left"><p><strong>Section 1</strong><br>
        (a) section 1A.</p>
        </td>
      <td width="11%" valign="top" class="field_data">
                    <input type="radio" name="Scale1A" value="Yes" validate = "required:true " class = "radioClick">Yes                     
                        <input type="radio" name="Scale1A" value="No" validate = "required:true " class = "radioClick">No           <label for = "Scale1A" class = "error">Please ensure this is completed</label> </td>
      <td width="26%" valign="top" class="field_data">
      <span class="field_name_left style1" id = "Scale1AWhereLabel"><strong>Where:</strong></span> 
      <textarea id = "Scale1AWhere" class="where" name="Scale1AWhere" cols="25" rows="2" validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>          
      <label for = "Scale1AWhere" class = "error">Please ensure this is completed</label>        </td>
      </tr>
    <tr>
      <td valign="top" class="field_name_left">            (b) section 1B.</td>
<td valign="top" class="field_data">              <input type="radio" name="Scale1B" value="Yes" validate = "required:true " class = "radioClick" />
        Yes                            <input type="radio" name="Scale1B" value="No" validate = "required:true " class = "radioClick" />
        No                          <label for = "Scale1B" class = "error">Please ensure this is completed</label>          </td>
      <td valign="top" class="field_data"><span class="field_name_left style1" id = "Scale1BWhereLabel"><strong>Where:</strong></span>
          <textarea id = "Scale1BWhere" class="where" name="Scale1BWhere" cols="25" rows="2" validate="required:'input[name=Scale1B][value=Yes]:checked'"></textarea> <label for = "Scale1BWhere" class = "error">Please ensure this is completed</label>           </td>
  </tr>
      <tr>
      <td width="63%" valign="top" class="field_name_left"><strong>Section 2.</td>
      <td valign="top" class="field_data">
                <input type="radio" name="Scale2" value="Yes"validate = "required:true" class="radioClick">Yes                      <input type="radio" name="Scale2" value="No"validate = "required:true" class="radioClick">No            <label for = "Scale2" class = "error">Please ensure this is completed</label>     </td>
      <td valign="top" class="field_data">
      <span class="field_name_left style1" id = "Scale2WhereLabel"><strong>Where:</strong></span>
      <textarea id = "Scale2Where" class="where" name="Scale2Where" cols="25" rows="2" validate="required:'input[name=Scale2][value=Yes]:checked'"></textarea> <label for = "Scale2Where" class = "error">Please ensure this is completed</label></td>
      </tr>

      <tr class="submit_btn">
                      <td colspan="3">
                            <input type="submit" name="-edit" value="Finish">
                            <input type="reset" name="reset" value="Reset">            </td>
        </tr>
      </table>

这是我的脚本:

$(".radioClick").click(function(){
    theStr = $("#"+this.name+"Where").val().length;
    if($(this).val()=="Yes" && theStr == 0){
        $("#"+this.name+"WhereLabel").addClass("emphasise");
    } else {
        $("#"+this.name+"WhereLabel").removeClass("emphasise");
    }
$(".where").keyup(function(){
    str = this.value.length;
    if(str == 0){
        $("#"+this.name + "Label").addClass("emphasise");
    }else{
        $("#"+this.name + "Label").removeClass("emphasise");
    }
});
});

$.metadata.setType("attr", "validate");
$("#editRecord").validate();

你可以在这个 jsFiddle 看到这个 Action

出于某种原因，我无法理解问题 1A 的“位置”标签在单击"is"按钮时从未更改为红色，但对于所有其他按钮都是如此？

Answer 1

问题是您的文本区域中有额外的空间。你需要 trim 它。或删除它。

theStr = $.trim($("#"+this.name+"Where").val()).length;

文本区域的额外空间:-

  <textarea id = "Scale1AWhere" class="where" 
  name="Scale1AWhere" cols="25" rows="2"
   validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>   

Fixed Code