单击按钮时显示复选框

Display Checkboxes on Click of a button

本文关键字：复选框 显示 按钮 单击      更新时间：2023-09-26

我有一个按钮Resend，点击它，复选框就会针对以下内容启用：

  • id="AlertSent"
  • id="AlertNotSent"
  • id="AlertInProgress"

现在上面提到的DIVS的DIV代码如下

<div class="span9">
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox1" name="checkbox1"/>
        </div>
        <div id="AlertSent" class="span12">
            <label><spring:message code='alert.sent' />:</label>
        </div>
    </div>
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox2" name="checkbox2"/>
        </div>
        <div id="AlertNotSent" class="span12">
            <label><spring:message code='alert.not.sent'/>:</label>
        </div>
    </div>
    <div class="row-fluid">
    <div id="enableCheckBox" class ="span12">
            <input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
        </div>
        <div id="AlertInProgress" class="span12">
            <label> <spring:message code='alert.in.progress' />:</label>
        </div>
    </div>
</div>

重新发送和完成的按钮代码是

<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>

JQuery代码是

var j$ = jQuery.noConflict();
j$(document).ready(function() {   
    var resendbtn = j$('#resend');
    var allChkBox = j$('input[name="enableCheckBox"]');
    var verifyChecked = function() {
        if ! $('#resend').click {
            allChkBox.attr('disabled', 'disabled');
        } else {
            allChkBox.removeAttr('disabled');
        }
    };
    verifyChecked();
    resendbtn.change(verifyChecked);
});

该要求是单击"重新发送"，复选框出现在上面的DIVS（AlertSent、AlertNotSent和AlertInProgress）上，"重新发送按钮"变为"完成"，如果用户取消选中所有复选框，则"完成"按钮将再次变为"重新发送。

如何编写JQuery/JavaScript代码来实现上述目标？

请建议

很难确切知道你想要什么，但也许这会让你开始：

http://jsfiddle.net/ZqH7B/

处理显示复选框：

$("#resend").on( 'click', function () {
    $('.enableCheckBox').css('visibility', 'inherit');
    $(this).hide().next().show();
    $('input:checkbox').prop('checked', true);
});

处理取消选中行为：

$('input[type=checkbox]').on( 'change', function() {
    var num = $('input:checked').length;
    if ( num == 0 ) { $('#resend').show().next().hide(); }
});

尝试以下代码：

HTML:

<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">

JS:

$(document).ready(function(){
    $(".chk").prop("checked","checked");
    $(".chk").css('display','none');
    $(".toggle").click(function(){
        $(".chk").css('display','block');
        $(".chk").prop("checked","checked");
        $(this).val("Done");
    });
    $(".chk").change(function(){
        var all = $(".chk").length;
        var chked = $(".chk").not(":checked").length;
        if(all == chked){
            $(".chk").css('display','none');
            $(".toggle").val("Resend");
        }
    })
});

JSFIDDLE演示

相关文章：