首页 新闻 会员 周边

请教前台大神：radio的分层js怎么写啊？

0
悬赏园豆：15 [已解决问题] 解决于 2014-04-18 13:51

一个父对象下面有三个子对象，总对象和分对象都有三个radio属性：1Read Only，2Read/Write,3Read/Write/Delete。

要求父对象的属性可对子对象属性进行批量修改，而子对象的属性也是可以单独修改，但是当子对象属性不同时候父对象radio的三个属性均不为checked。

业务逻辑应该不难理解，但是这个radio的JS怎么写啊，请前台大神指点一下。

关四刚的主页 关四刚 | 初学一级 | 园豆：167
提问于：2014-04-18 11:27
< >
分享
最佳答案
0 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript">
        function pselect(obj) {
            var pv = obj.value;
            setRadioValue("c1", pv);
            setRadioValue("c2", pv);
            setRadioValue("c3", pv);
        }
        function cselect(obj) {
            var cv = obj.value;
            var sameSelect = isChildSameSelect();
            if(sameSelect) {
                setRadioValue("p", cv);
            } else {
                setRadioNone("p");
            }
        }
        function isChildSameSelect() {
            var v1 = getRadioValue("c1");
            var v2 = getRadioValue("c2");
            var v3 = getRadioValue("c3");
            return v1 === v2 && v1 === v3;
        }
        function getRadioValue(name) {
            var radios = document.getElementsByName(name);
            for(var i = 0; i < radios.length; i ++) {
                var radio = radios[i];
                if(radio.checked) return radio.value;
            }
        }
        function setRadioValue(name, value) {
            var radios = document.getElementsByName(name);
            //本来是应该遍历数组的，这里偷懒了
            radios[value - 1].checked = "checked";
        }
        function setRadioNone(name) {
            var radios = document.getElementsByName(name);
            for(var i = 0; i < radios.length; i ++) {
                radios[i].checked = "";
            }
        }
    </script>
</head>
<body>
<ul>
    <li>
        <input type="radio" name="p" value="1" onclick="pselect(this);" /> Read Only
        <input type="radio" name="p" value="2" onclick="pselect(this);" /> Read/Write
        <input type="radio" name="p" value="3" onclick="pselect(this);" /> Read/Write/Delete
    </li>
    <ul>
        <li>
            <input type="radio" name="c1" value="1" onclick="cselect(this);" /> Read Only
            <input type="radio" name="c1" value="2" onclick="cselect(this);" /> Read/Write
            <input type="radio" name="c1" value="3" onclick="cselect(this);" /> Read/Write/Delete
        </li>
        <li>
            <input type="radio" name="c2" value="1" onclick="cselect(this);" /> Read Only
            <input type="radio" name="c2" value="2" onclick="cselect(this);" /> Read/Write
            <input type="radio" name="c2" value="3" onclick="cselect(this);" /> Read/Write/Delete
        </li>
        <li>
            <input type="radio" name="c3" value="1" onclick="cselect(this);" /> Read Only
            <input type="radio" name="c3" value="2" onclick="cselect(this);" /> Read/Write
            <input type="radio" name="c3" value="3" onclick="cselect(this);" /> Read/Write/Delete
        </li>
    </ul>
</ul>
</body>
</html>
View Code

不知道是不是这样的。

说实话，本身逻辑并不复杂，如果楼主只是不知道如何获取radio的值，那么百度一下也就知道了

收获园豆：15
ThreeTree | 小虾三级 |园豆：1490 | 2014-04-18 13:05

完全正解，膜拜大神，感谢大神！

关四刚 | 园豆：167 (初学一级) | 2014-04-18 13:49
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。