Question

每当选中复选框sec_dept_time_leave时，我想在标签上添加一个名为“required”的类，并且还要添加到段落标记。

如果未选中，请删除标签和段落标记的“必需”类。

这是我的jquery：

$('#sec_dept_time_leave').on("click", function() {
  if ($(this).is(":checked")) {
     $('label#hr_dept_time_orgn1').addClass("required");
  }
  else {
    $('label#hr_dept_time_orgn1').removeClass("required"); 
  }
});

HTML：

<div class="row singlecheck">
    <label for="sec_dept_time_leave">Department Time/Leave Entry</label>
    <input value="Department time" type="checkbox" 
     name="sec_dept_time_leave" id="sec_dept_time_leave" />
</div>

<div class="row">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div>  
<p> This is required text </p>
<ul>
  <li><label for="hr_dept_time">Time</label><input value="Dept Time" type="radio"          name="hr_dept_time_leave" id="hr_dept_time" /></li>
  <li><label for="hr_dept_leave">Leave</label><input value="Dept Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_leave" /></li>
  <li><label for="hr_dept_both">Both</label><input value="Both Dept Time and Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_both" /></li>
</ul>

我希望这是检查时的最终结果

<div class="row required">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div> 
<p> This is required text<span class="required">*</span></p>

我想在检查后取消选中

作为最终结果

<div class="row">
   <label for="hr_dept_time_orgn1">ORGN 1</label> 
   <input type="text" name="hr_dept_time_orgn1" id="hr_dept_time_orgn1" />
</div> 
<p> This is required text</p>
<ul>
  <li><label for="hr_dept_time">Time</label><input value="Dept Time" type="radio"   name="hr_dept_time_leave" id="hr_dept_time" /></li>
  <li><label for="hr_dept_leave">Leave</label><input value="Dept Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_leave" /></li>
  <li><label for="hr_dept_both">Both</label><input value="Both Dept Time and Leave" type="radio" name="hr_dept_time_leave" id="hr_dept_both" /></li>
</ul>

非常感谢

Answer 1

尝试

$('#sec_dept_time_leave').on("click", function () {
    var $next = $('#hr_dept_time_orgn1');
    var $row = $next.closest('.row').toggleClass('required', this.checked);
    if (this.checked) {
        $row.next().append('<span class="required">*</span>')
    } else {
        $row.next().find('.required').remove()
    }
});

Answer 2

尝试使用此代码：

HTML：

<p id="show"> This is required text<span class="required">*</span> </p>

JS：

$("p .required").hide();
$('#sec_dept_time_leave').change(function(){
  if ($(this).is(":checked")) {
     $("p .required").show();
  }
  else {
   $("p .required").hide(); 
  }
});

工作Fiddle

Answer 3

请这样，我得到了一个结果。

<script type="text/javascript"> 
$('#sec_dept_time_leave').on("click", function() {
if ($('#sec_dept_time_leave').is(":checked")) {
 $('#hr_dept_time_orgn2').addClass('required');
}
else {
 $('#hr_dept_time_orgn2').removeClass("required"); 
}
}); 
</script>
<div class="row">
 <label for="hr_dept_time_orgn1">ORGN 1</label> 
 <input type="text" name="hr_dept_time_orgn2" id="hr_dept_time_orgn2" />

</div>

使用jquery添加类以形成标签

3 个答案: