0

每当检查Checkbox sec_dept_time_leave并将段落标签选中时，我想在标签中添加一个名为“必需”的类。

未选中时，删除标签和段落标签的“必需”类。

这是我的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>

非常感谢

4

3 回答 3

1

请喜欢这个，我得到了结果。

<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>
于 2013-09-06T04:49:50.273 回答
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()
    }
});
于 2013-09-06T04:28:15.927 回答
1

试试这个代码：

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(); 
  }
});

工作小提琴

于 2013-09-06T04:28:47.477 回答