Question

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

这是表格中前三行的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

看到这一点

出于某种原因，我无法理解问题1A的Where标签在点击Yes按钮时永远不会变为红色，但是对于其他所有人来说都是如此？

Answer 1

问题是文本区域中的额外空间。你需要修剪它。或者删除它。

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>

除第一行外，向Label Works添加类

1 个答案:

Fixed Code