radio cascade

radio 上下联动

by Three Tree

HTML

<dl> <dt>
        <label><input type="radio" name="p" value="1" /> Read Only</label>
        <label><input type="radio" name="p" value="2" /> Read/Write</label>
        <label><input type="radio" name="p" value="3" /> Read/Write/Delete</label>
    </dt>

    <dd>
        <label>
            <input type="radio" name="c1" value="1" />Read Only</label>
        <label>
            <input type="radio" name="c1" value="2" />Read/Write</label>
        <label>
            <input type="radio" name="c1" value="3" />Read/Write/Delete</label>
    </dd>
    <dd>
        <label>
            <input type="radio" name="c2" value="1" />Read Only</label>
        <label>
            <input type="radio" name="c2" value="2" />Read/Write</label>
        <label>
            <input type="radio" name="c2" value="3" />Read/Write/Delete</label>
    </dd>
    <dd>
        <label>
            <input type="radio" name="c3" value="1" />Read Only</label>
        <label>
            <input type="radio" name="c3" value="2" />Read/Write</label>
        <label>
            <input type="radio" name="c3" value="3" />Read/Write/Delete</label>
    </dd>
    <dd>
        <label>
            <input type="radio" name="c4" value="1" />Read Only</label>
        <label>
            <input type="radio" name="c4" value="2" />Read/Write</label>
        <label>
            <input type="radio" name="c4" value="3" />Read/Write/Delete</label>
    </dd>
</dl>

JavaScript

$('dl').on('click', 'dt label', function () {
    var $this = $(this),
        index = $this.index();
    $this.parents('dl').children('dd').each(function () {
        $(this).find('input').eq(index).prop('checked', 'checked');
    });
}).on('click', 'dd label', function () {
    var $this = $(this),
        index = $this.index(),
        flag = true,
        $dl = $this.parents('dl');
    $dl.children('dd').each(function () {
        if (!$(this).find('input').eq(index).is(':checked')) {
            flag = false;
            return false;
        }
    });
    var $inputs = $dl.children('dt').find('input');
    flag && $inputs.eq(index).prop('checked', 'checked') || $inputs.prop('checked', '');
});