複選框隱藏Div未經檢查

我有一個複選框隱藏div與文本字段。如果複選框被選中，該文本字段將顯示，但如果複選框未選中，則文本字段不顯示。此代碼：複選框隱藏Div未經檢查

<script type="text/javascript"> 
    $(function() { 

     $("input[name='checkbox1']").click(function() { 

      if ($("#checkyes1").is(":checked")) { 
       $("#dvcheckbox1").show('lainnya'); 

      } else { 

       $("#dvcheckbox1").hide('lainnya'); 
      } 



     }); 
    }); 
</script> 

<div style="margin-left: 29%; margin-top: -2%;"> 
<label for="checkyes1"> 

<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" /> 
Lainnya 
</label> 

<div id="dvcheckbox1" style="display: none;"> 
    <?php echo $form->textField($model,'lainnya'); ?> 
</div> 
</div>

但是，如何檢查此複選框是否有文本字段上的值？並顯示文本字段。因爲在表單Update中，值顯示，但複選框被選中。我想複選框被選中

例如像這樣： Click to show example

來源

2017-03-06 Maksudi Indra

你的問題不清楚 – madalinivascu

您的代碼似乎很好地工作。究竟是什麼問題？ –

在表單更新中，顯示文本字段中的值，但複選框未被選中。我想複選框被選中 –

與change事件而是使用與.toggle(boolean)方法：

// on page load check of the div contains any text 
$("#dvcheckbox1").toggle(function(){ 
    var $v = $(this).find('input').val(); 
    $("input[name='checkbox1']").prop('checked', $v.trim().length !== 0) 
    return $v.trim().length !== 0; 
});  

$("input[name='checkbox1']").change(function() { 
    $("#dvcheckbox1").toggle(this.checked); 
});

來源

2017-03-06 07:47:30 Jai

謝謝這是工作。但對我的語言感到抱歉。還在研究@Jai –

這裏有幾件事情：

1 - 更好如果您使用文檔就緒，因爲它會等待所有元素加載完成。

2 - 當頁面加載時，您應該隱藏元素$（「＃dvcheckbox1」）。hide（'lainnya'）。

3 - 輸入文本中的監聽者是一個好主意。如果文本框爲空，它將啓用複選框。

請看看下一段代碼：

<div> 
    <label for="checkyes1"> 
    <input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" /> 
     Lainnya 
    </label> 

    <div id="dvcheckbox1"> 
     <label for="myValuye"/> 
     <input type="text" id="myValue" name="myValue" value=""/> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 
    $("input[name='checkbox1']").click(function() { 
     // Always use some logs to check what line are you reaching. 
     console.log("Clicked checkbox!!!"); 

     if ($("#checkyes1").is(":checked")) { 
      $("#dvcheckbox1").show('lainnya'); 
     } else { 
      console.log("Value: " + $("#myValue").val()); 
      $("#dvcheckbox1").hide("lainnya"); 
     } 
    }); 

    $("#myValue").bind("change paste keyup", function() { 
     if ($(this).val() == "") { 
      $("#checkyes1").removeAttr("disabled"); 
     } else { 
      $("#checkyes1").attr("disabled", true); 
     } 
    }); 

    // First of all we hide the #dvcheckbox1 
    $("#dvcheckbox1").hide('lainnya'); 
})

來源

2017-03-06 08:20:10

複選框隱藏Div未經檢查

回答

相關問題