按照复选框使用jquery获取订单

时间:2015-11-12 07:35:00

标签: jquery

我有一组复选框:

<tbody>
    <tr>
        <td>
            <input type="checkbox" class="check_class" id="check5" value="5" rel="<p>Vatican visit</p>">
        </td>
        <td>Visit to Rome</td>
        <td>Vatican visit</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check_class" id="check7" value="7" rel="<p>visit church</p>">
        </td>
        <td>Visit church</td>
        <td>visit church</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check_class" id="check11" value="11" rel="<p><strong>A round trip across the city highlights</strong></p>">
        </td>
        <td>Paris tour</td>
        <td>A round trip across the city highlights</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check_class" id="check12" value="12" rel="<ul><li>Have <strong>fun with children's</strong> dearest cartoon charecters</li></ul>">
        </td>
        <td>Disney land vist</td>
        <td>Have fun with children's dearest cartoon charecters</td>
    </tr>
</tbody>

我需要的是我想根据检查的顺序获取rel中的值

现在我正在使用以下jquery

$('.check_class:checked').each(function() {
    var details = $(this).attr('rel');
    final_details += details;
    final_details += ",<br>";
});

它有效,但它的工作方式 如果我选择“巴黎之旅”作为我的第一次点击然后“访问教堂”它会返回值,其中第一个将是“访问教堂”,然后是“巴黎之旅”

我的要求是我需要按照复选框上的那些值,就像之前的例子我首先需要“巴黎之旅”然后“访问教堂”

我期待得到真正的帮助

1 个答案:

答案 0 :(得分:1)

这是工作fiddle

$(document).ready(function() {
    var myOptions = [];

    $('input[type=checkbox]').click(function() {
        var option = {};
        option['id'] =  $(this).attr('id');
        option['rel'] =  $(this).attr('rel');

        if (this.checked)
           myOptions.push(option);
        else
           myOptions = $.grep(myOptions, function(o){ return o.id != option['id']; });

      console.log(myOptions);
    });
});

在下面的代码中,您按照检查状态循环DOM元素,以便按照DOM顺序创建数组。

$('.check_class:checked').each(function() {
    var details = $(this).attr('rel');
    final_details += details;
    final_details += ",<br>";
});