赞同 1
分享

jquery获取checkbox复选框选项

简介:html中多个复选框获取每一个复选框选中的值,这个操作和单选框还是有些区别的。
  2020.08.10
  Bug Man
  1
  16
  172.17.0.1
  中国.上海
 
 

获取每一个复选框中勾选内容的思路是获取他们的父级节点,在这个HTML中就是question_1、question_2、question_3、question_4这四个标签,拿到每个节点后获取该节点子节点中被勾选checked的状态的input标签的value属性就是勾选的内容了。

<form action="">
    <div class="test_content_nr">
        <ul>

            <li id="question_1">
                <div class="test_content_nr_tt">
                    <input type="hidden" value="1" class="choice-duo">
                    <font>这是一个多选题题目()</font>
                </div>
                <div class="test_content_nr_main">
                    <ul>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer1" id="option_11" value="A">
                            <label for="option_11">
                                A.
                                <p class="ue" style="display: inline;">A选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer1" id="option_21" value="B">
                            <label for="option_21">
                                B.
                                <p class="ue" style="display: inline;">B选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer1" id="option_31" value="c">
                            <label for="option_31">
                                C.
                                <p class="ue" style="display: inline;">C选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer1" id="option_41" value="D">
                            <label for="option_41">
                                D.
                                <p class="ue" style="display: inline;">D选项内容</p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>

            <li id="question_2">
                <div class="test_content_nr_tt">
                    <input type="hidden" value="2" class="choice-duo">
                    <font>这是一个多选题题目()</font>
                </div>
                <div class="test_content_nr_main">
                    <ul>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer2" id="option_12" value="A">
                            <label for="option_12">
                                A.
                                <p class="ue" style="display: inline;">A选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer2" id="option_22" value="B">
                            <label for="option_22">
                                B.
                                <p class="ue" style="display: inline;">B选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer2" id="option_32" value="c">
                            <label for="option_32">
                                C.
                                <p class="ue" style="display: inline;">C选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer2" id="option_42" value="D">
                            <label for="option_42">
                                D.
                                <p class="ue" style="display: inline;">D选项内容</p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>

            <li id="question_3">
                <div class="test_content_nr_tt">
                    <input type="hidden" value="3" class="choice-duo">
                    <font>这是一个多选题题目()</font>
                </div>
                <div class="test_content_nr_main">
                    <ul>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer3" id="option_13" value="A">
                            <label for="option_13">
                                A.
                                <p class="ue" style="display: inline;">A选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer3" id="option_23" value="B">
                            <label for="option_23">
                                B.
                                <p class="ue" style="display: inline;">B选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer3" id="option_33" value="c">
                            <label for="option_33">
                                C.
                                <p class="ue" style="display: inline;">C选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer3" id="option_43" value="D">
                            <label for="option_43">
                                D.
                                <p class="ue" style="display: inline;">D选项内容</p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>

            <li id="question_4">
                <div class="test_content_nr_tt">
                    <input type="hidden" value="4" class="choice-duo">
                    <font>这是一个多选题题目()</font>
                </div>
                <div class="test_content_nr_main">
                    <ul>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer4" id="option_14" value="A">
                            <label for="option_14">
                                A.
                                <p class="ue" style="display: inline;">A选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer4" id="option_24" value="B">
                            <label for="option_24">
                                B.
                                <p class="ue" style="display: inline;">B选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer4" id="option_34" value="c">
                            <label for="option_34">
                                C.
                                <p class="ue" style="display: inline;">C选项内容</p>
                            </label>
                        </li>
                        <li class="option">
                            <input type="checkbox" class="radiodoCheck" name="answer4" id="option_44" value="D">
                            <label for="option_44">
                                D.
                                <p class="ue" style="display: inline;">D选项内容</p>
                            </label>
                        </li>
                    </ul>
                </div>
            </li>

        </ul>
    </div>
    <input type="button" name="" value="交卷" id="examBtn">
</form>
<script>
    $('.choice-duo').each(function () {
        examid_duo.push($(this).val());
        self = this;
        var item = {};
        item[$(this).val()] = [];
        $('#qu_0_'+$(this).val()+' .radiodoCheck:checked').each(function () {
            item[$(self).val()].push($(this).val());
        });
        result.push(item);

    });
    console.log(result);
</script>