0

追加とグループ化の2つのボタンがあります。最初はグループ ボタンが非表示になっています。追加ボタンは、レコードを作成するために使用されます。

例: 5 つのレコードが作成された場合 (追加ボタンを 5 回押す)。ユーザーが以上を選択する checkboxと、非表示のグループ ボタンが表示されます。これを行う方法を教えてください。

このフィドルを見てください

私は使用してbootstrap cssおり、非表示にしています

<input type="button" id="btn2" class="btn btn-lg btn-primary hide" value="Group">

更新 チェック ボックスは、ユーザーがいくつかのレコードを入力した場合にのみ表示されます。フォームに記入し、追加ボタンを押した後

4

4 に答える 4

4

このフィドルを見る

$(document).on('change','#mytable input:checkbox',function () {
    if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide')
    }
    else {
        $('#btn2').addClass('hide')
    }
});
于 2013-10-30T11:33:57.710 に答える
1

changeチェックボックスのイベントにチェックを追加します。以下のフィドルと例：

$(document).on('change','#mytable input:checkbox',function () {
    if(!this.checked)
    {
        key=$(this).attr('name').replace('mytr','');
        alert(key);
        obj[key]=null;
    }

    //updated using your bootstrap class to show/hide
    if($('#mytable input:checkbox:checked').length > 1) {
        $('#btn2').removeClass('hide');
    } else {
        $('#btn2').addClass('hide');
    }

});

更新された質問に従って、ブートストラップ クラスを使用するように更新されました。

于 2013-10-30T11:35:19.343 に答える
1

フィドルはこちら

    if($('#mytable input:checkbox:checked').length > 1)
        $('#btn2').show();
    else
        $('#btn2').hide();
于 2013-10-30T11:35:54.823 に答える
0

これを試して

    var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
    var obj={};
    $('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }
    });
    $(document).on('click', '#btn2',function () {
        var creat_group = confirm("Do you want to creat a group??");
        if (creat_group) {
            console.log(obj);

            $tr.append("<td >" + groupTrCount + "</td>");

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
    $tr=$("#groupTr" + groupTrCount);
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
    var userColumn = "<ul>";
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
      var count=0;
      $(this).find('td').each(function() {
         if(count == 1){
        userColumn+= "<li>" + $(this).html() + "</li>" ;
         }
         count++;
    });
});;
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        var rowCount = $('#mytable tr').length;
        if($('input:checkbox:checked').length > 1 && rowcount > 6) {
        $('#btn2').removeClass('hide')
    }
    });
});

更新されたフィドルは: http://jsfiddle.net/4GP9c/184/

于 2013-10-30T11:36:10.120 に答える