javascript:如果选中复选框并且textarea为空,请提醒

时间:2013-10-30 19:43:06

标签: javascript html

我怎么能这样做?我想在用户点击提交按钮时发出警报,并且只有在选中复选框并且textarea为空时才显示此警报...因为此textarea是隐藏的,并在复选框选中时显示。

例如: http://jsfiddle.net/gDttK/

HTML:

   <label for="check">other
     <input type="checkbox" name="check0" id="check">
   </label>
   <div id="show">
    <textarea cols="20" rows="5"></textarea>
   </div>

CSS:

   #show { display: none;}

使用Javascript:

$("#check").change(function () {
$("#show").toggle($("#check:checked").length > 0);});

3 个答案:

答案 0 :(得分:1)

您需要提醒并停止处理表单。 要阻止您使用的表单处理:event.preventDefault();

证明: http://jsfiddle.net/UnWt9/

<强> HTML:

<form>
    <label for="check">other
    <input type="checkbox" name="check0" id="check"></label>
<br>
    <div id="show">
        <textarea cols="20" rows="5"></textarea>
<br>
        </div>
    <button type="submit">Submit</button>
<form>

<强> jQuery的:

$("#check").change(function(){
    $("#show").toggle($("#check").prop('checked'));
});

$('form').submit(function(event){

    if( $("#check").prop('checked') && !$.trim($("#show textarea").val()).length ){
           alert('checkbox chcked textarea empty');
        event.preventDefault();
        return;
    }

    event.preventDefault(); // here only for testing
    alert('form submitted');
});

答案 1 :(得分:0)

不确定你的小提琴,但根据你的问题,你可以这样做:(你还需要正确调整你的HTML)

更新

$("form").submit(function(e) {
    if ($("#check").not(":checked") && $('#show textarea').val().length <= 0) { e.preventDefault(); alert('error'); }   
});

答案 2 :(得分:0)

这是你的答案。

HTML:

<label for="check">other
    <input type="checkbox" name="check0" id="check"></label>
    <div id="show">
        <textarea cols="20" rows="5"></textarea>
    </div>

    <input type="submit" id="mysubmit">

JS:

$("#check").change(function(){
    $("#show").toggle($("#check:checked").length > 0);
});

$("#mysubmit").click(function(){
    if($("#check:checked").length > 0){
        alert("Some text");
    }
});

检查http://jsfiddle.net/alaminopu/gDttK/2/