배열질문입니다..

배열질문입니다..

QA

배열질문입니다..

본문

선택된 체크박스의 벨류 값만 가져오도록 코딩된것을,

 

혹시 그룹화 할 수 있을까요? ㅠㅠ


<tr>
                <th scope="row">도배</th>
                <td>
                    <ul class="btn_area nine_column after">
                        <li class="btn_li">
                            <input id="a" type="checkbox" name="aya1"  value="소폭합지">
                            <label for="a">소폭 합지</label>
                        </li>
                        <li class="btn_li">
                            <input id="b" type="checkbox" name="aya1"  value="광폭합지">
                            <label for="b">광폭 합지</label>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <th scope="row">목공</th>
                <td>
                    <ul class="btn_area nine_column after">
                        <li class="btn_li">
                            <input id="f" type="checkbox" name="aya2"  value="몰딩">
                            <label for="f">몰딩</label>
                        </li>
                        <li class="btn_li">
                            <input id="g" type="checkbox" name="aya2"  value="걸레받이">
                            <label for="g">걸레받이</label>
                        </li>
                    </ul>
                </td>
            </tr>
            <div id="btn">버튼</div>
            <div id="content"></div>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
             var strs = "";
            for (i = 1; i <= 2 ; i ++ ){ 
                 f = "aya"+i;
                $("input[name="+f+"]:checked").each(function() {
                    //f += $(this).val()+",";
                     strs += $(this).val()+"|";
                });
            }
               $("#content").html(strs);
        })
    })
</script>

 

위 코드를 실행하면 

아래와 같이 나오는데요,,

 

2948935394_1517470931.6862.jpg

소폭합지는 도배그룹으로

몰딩은 목공 그룹으로,,, 그룹화 해서 표시 되도록 할 수 있을까요....????????

 

그게 안된다면,, for문을 풀고 일일히 하는게 맞겠죠?????ㅠㅠ

 

 

이 질문에 댓글 쓰기 :

답변 5

$(function(){
        $("#btn").click(function(){
            var strs_aya1 =[];
            var strs_aya2 =[];

            for (i = 1; i <= 2 ; i ++ ){ 
                f = "aya"+i;
                $("input[name="+f+"]:checked").each(function() {
                    if( $(this).attr("name") == "aya1" ) strs_aya1.push($(this).val());
                    else  strs_aya2.push($(this).val());
                });
            }
               $("#content").html("도배=>"+strs_aya1.join("|")+"/목공=>"+strs_aya2.join("|"));
        })
    })


$list[0] = array("도배", "소폭 합지", "광폭 합지");
$list[1] = array("목공", "몰딩", "걸레받이");
 
for($i=0; $i<count($list); $i++) {
    echo "row " . $list[$i][0] . PHP_EOL;
    for($j=1; $j<count($list[$i]); $j++) {
        echo "li " . $list[$i][$j] . PHP_EOL;
    }
}

 

이렇게 첫번째 값은 row의 name(도배, 목공)으로 하시고

두번째 값부터 하위 값(목공의 경우 소폭 합지, 광폭 합지)로 하시면 되지 않을까 싶네요.

이전에도 한번 이와 비슷한 질문이 있었던것 같은데..

jquery 를 사용하신다면 아래 코드를 조금 변경해 보시는게 좋을 듯 합니다.


var seq = $('.chkitem:checked').map(function(){ return $(this).val();}).get().join(",");

이건 체크된 것만 배열화 해서 얻어 온것이니 tag의 클래스만 적당히 바꾸어 주시면 될 듯 하고요


closest("th")

를 사용해서 해당 그룹명을 가져오면 될 듯 합니다.

$("#btn").click(function(){
     var item = [], arr = ['', '도배', '목공'], html = '', f, i;
    for (i = 1, f = 'aya' + i, item[f] = []; i <= 2 ; i ++ ){ 
        $("input[name="+f+"]:checked").each(function() {               
             item[f].push( this.value );
        });
        if (item[f].length) 
            html += (i == 1 ? '' : '|') + arr[i] + ':' +  item[f].join(',');
    }
    $("#content").html(html);
})

$("#btn").click(function(){
    var item = [], cate = [''], html = '', f, i, name;
    $( '.btn_area' ).parent().prev().each( function() {
        cate.push( $(this).text() );
    });
    for (i = 1; i < cate.length ; i ++){
        name = 'aya' + i;
        item[name] = [];
        $("input[name="+name+"]:checked").each(function() {
            item[name].push( this.value );
        });
        if (item[name].length)
            html += (html ? '|' : '') + cate[i] + ':' +  item[name].join(',');
    }
    $("#content").html(html);
})

새로주신 코드도 안나오길래 보았더니
th의 텍스트를 못찾더라구요 ㅎㅎ


    $( '.btn_area' ).parent().prev().each( function() { 
        cate.push( $(this).text() ); 
    }); 

 이부분을

  $( '.titless' ).each( function() { 
        cate.push( $(this).text() ); 
    }); 


이렇게 바꾸고
그래서 th안에 p태그 넣고 클래스로 잡았습니다 ㅎㅎ

감사합니다!!

푸쉬랑 조인 아주 좋은기능 배웟습니다 감사합니다.

우선 놓고 갑니다~


<table>
<tr>
                <th scope="row">도배</th>
                <td>
                    <ul class="btn_area nine_column after">
                        <li class="btn_li">
                            <input id="a" class="chkitem" type="checkbox" name="aya1"  value="소폭합지">
                            <label for="a">소폭 합지</label>
                        </li>
                        <li class="btn_li">
                            <input id="b"  class="chkitem" type="checkbox" name="aya1"  value="광폭합지">
                            <label for="b">광폭 합지</label>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <th scope="row">목공</th>
                <td>
                    <ul class="btn_area nine_column after">
                        <li class="btn_li">
                            <input id="f"  class="chkitem" type="checkbox" name="aya2"  value="몰딩">
                            <label for="f">몰딩</label>
                        </li>
                        <li class="btn_li">
                            <input id="g"  class="chkitem" type="checkbox" name="aya2"  value="걸레받이">
                            <label for="g">걸레받이</label>
                        </li>
                    </ul>
                </td>
            </tr>
</table>
<div id="btn"><button id="btn">클릭</button></div>
            <div id="content"></div>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            var arr = {};
            var seq = $('.chkitem:checked').each(function(index){
                 var name = $(this).closest("tr").children().filter(":first").html();
                 if(!$.isArray(arr[name])) arr[name] = new Array();                                
                arr[name].push($(this).val());
                 
             });                
        })
    })
</script>

 

답변을 작성하시기 전에 로그인 해주세요.
전체 71
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT