我们可以为name属性提供所需的功能

时间:2017-05-18 05:44:12

标签: javascript php required

这里我有单选按钮和复选框按钮,我想提供所需的功能,所以我给了我这样的代码

<script>
    $( document ).ready(function() {
        
        $cbx_group = $("input:radio[name='occupation_status[]']");
        $cbx_group1 = $("input:checkbox[name='occupation_status[]']");
        
        if(($cbx_group.not(":checked"))&&($cbx_group1.not(":checked"))){

          document.getElementByName("occupation_status").required = true;
        } else{
        
           $cbx_group.prop('required', false);
           $cbx_group1.prop('required', false);
        }
     });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label">Occupation status:</label>
  <div class="col-sm-8">
    <label class="radio-inline formui-radio option">
      <input type="radio"  name="occupation_status[]" id="occupation_status1" value="self">
      Self </label>
    <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status2" value="employed">
      Employed </label>
       <span>
  <label class="checkbox-inline form-checkbox option" style=" width: 113px;">
    <input type="checkbox" name="occupation_status[]" id="occupation_status3" value="Night Shift"/>Night Shift
  </label>
  </span>
  <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status4" value="Retired">
      Retired </label>
  </div>
</div>

如果未选中复选框和单选按钮,则应显示至少一个要检查的内容,如果选中任何单选按钮或复选框按钮,则应执行错误条件

1 个答案:

答案 0 :(得分:1)

检查此代码段:

&#13;
&#13;
$( document ).ready(function() {
    
    var radio_group = $('input[type="radio"][name="occupation_status[]"]');
    var cbx_group = $('input[type="checkbox"][name="occupation_status[]"]');
    
    changeRequiredStatus();
    
    $('[name="occupation_status[]"]').change(function(){
    		changeRequiredStatus();
    });
    
    function changeRequiredStatus(){
        if(!radio_group.is(":checked")&&!cbx_group.is(":checked")){
            $('[name="occupation_status[]"]').prop('required',true);
        }
        else{
            $('[name="occupation_status[]"]').prop('required',false);
        }
    }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label">Occupation status:</label>
  <div class="col-sm-8">
    <label class="radio-inline formui-radio option">
      <input type="radio"  name="occupation_status[]" id="occupation_status1" value="self">
      Self </label>
    <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status2" value="employed">
      Employed </label>
       <span>
  <label class="checkbox-inline form-checkbox option" style=" width: 113px;">
    <input type="checkbox" name="occupation_status[]" id="occupation_status3" value="Night Shift"/>Night Shift
  </label>
  </span>
  <label class="radio-inline formui-radio option">
      <input type="radio" name="occupation_status[]" id="occupation_status4" value="Retired">
      Retired </label>
  </div>
</div>
&#13;
&#13;
&#13;