radio_radiobutton - CSDN
精华内容
参与话题
  • Form表单之radio单选框操作

    万次阅读 2017-01-13 10:26:35
    input单选框,name相同的单选项为同一单选组: 1.选中某值的项: ...$("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和 $("input[name='radio1'][value=radio单选项2]").attr("ch

    input单选框,name相同的单选项为同一单选组:

    1.radio选中某值的项:

    <label>input单选1组:</label>
    radio单选项1<input type="radio" name="radio1" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio1" value="radio单选项2"/>

    $("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和

    $("input[name='radio1'][value=radio单选项2]").attr("checked","checked");的效果相同。

    如果不能实现效果,请尝试给value添加单引号和双引号试试。

    <label>input单选2组:</label>
    radio单选项1<input class="radio2" type="radio" name="radio2" value="radio单选项1"/>
    radio单选项2<input class="radio2" type="radio" name="radio2" value="radio单选项2"/>
    radio单选项3<input class="radio2" type="radio" name="radio2" value="radio单选项3"/>

    $(".radio2[value=radio单选项3]").attr("checked","checked");会选中多个clas=“radio2”的单选组中值为radio单选项3的项。

    <label>input单选3组:</label>
    radio单选项1<input id="radio3" type="radio" name="radio3" value="radio单选项1"/>
    radio单选项2<input id="radio3" type="radio" name="radio3" value="radio单选项2"/>
    radio单选项3<input id="radio3" type="radio" name="radio3" value="radio单选项3"/>

    $("#radio3[value=radio单选项2]").attr("checked","checked");

    选中id="radio3"的两组(input单选3组和input单选4组)单选值为“radio单选项2”的项,同一页面相同的id不是只能有一个的吗?超出了我的认知呀。

    2.radio选中某索引的项:

    <label>input单选5组:</label>
    radio单选项1<input type="radio" name="radio5" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio5" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio5" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio5" value="radio单选项4"/>

    $("input[name='radio5']").eq(索引值).attr("checked","checked"); 

    索引值从0开始;$("input[name='radio5']").eq(2).attr("checked","checked");选中name="radio5"的第三项;

    <label>input单选6组:</label>
    radio单选项1<input type="radio" name="radio6" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio6" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio6" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio6" value="radio单选项4"/>

    $("input[name='radio6']:first").attr("checked","checked");//:first选中第一项;

    <label>input单选7组:</label>
    radio单选项1<input type="radio" name="radio7" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio7" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio7" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio7" value="radio单选项4"/>

    $("input[name='radio7']:last").attr("checked","checked");//选中最后一项

    3.获取radio选中项的值:

    <label>input单选8组:</label>
    radio单选项1<input type="radio" name="radio8" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio8" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio8" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio8" value="radio单选项4"/>

    $("input[name='radio8']:checked").val();//获取选中项的值

    4.获取radio选中项的index(index从1开始):

    <label>input单选9组:</label>
    radio单选项1<input type="radio" name="radio9" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio9" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio9" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio9" value="radio单选项4"/>

    $("input[name='radio9']:checked").index();//获取选中项的索引(这里用索引似乎也不大恰当,值是从1开始,不是0)

    5.获取radio某值的index:

    <label>input单选10组:</label>
    radio单选项1<input type="radio" name="radio10" value="radio单选项1"/>
    radio单选项2<input type="radio" name="radio10" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio10" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio10" value="radio单选项4" checked="checked"/>

    $("input[name='radio10'][value=radio单选项2]").index()//获取radio组中某值的项(第二项的index()=2,不是1,index()从1开始)

    6.获取radio某索引对应的值:

    <label>input单选11组:</label>
    radio单选项1<input type="radio" name="radio11" value="radio单选项1" checked="checked"/>
    radio单选项2<input type="radio" name="radio11" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio11" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio11" value="radio单选项4"/>

    $("input[name='radio11']").eq(3).val();//获取radio某索引的值

    7.删除radio值对应的项:

    <label>input单选12组:</label>
    radio单选项1<input type="radio" name="radio12" value="radio单选项1" checked="checked"/>
    radio单选项2<input type="radio" name="radio12" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio12" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio12" value="radio单选项4"/>

    $("input[name='radio12'][value=radio单选项2]").remove();//删除值对应的项,后面项的index序号依次减1 

    删除索引对应的项:$("input[name='radio12']").eq(1).remove();//在此不单独加示例。

    至于是新增项没见到有类似操作;

    8.禁用radio单选组或某项:

    <label>input单选13组:</label>
    radio单选项1<input type="radio" name="radio13" value="radio单选项1" checked="checked"/>
    radio单选项2<input type="radio" name="radio13" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio13" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio13" value="radio单选项4"/>

    //$("input[name='radio13']").eq(2).prop("disabled","disabled");//禁用某项,当然选择器也可以换成某值对应的项;
    $("input[name='radio13']").prop("disabled","disabled");//禁用整组radio
    $("input[name='radio13']").eq(2).attr("checked","checked");//禁用后不可切换选中项,但js可操作
    //$("input[name='radio13']").removeProp("disabled");//移除radio禁用 

    <label>input单选15组:</label>
    radio单选项1<input type="radio" name="radio15" value="radio单选项1" checked="checked"/>
    radio单选项2<input type="radio" name="radio15" value="radio单选项2"/>
    radio单选项3<input type="radio" name="radio15" value="radio单选项3"/>
    radio单选项4<input type="radio" name="radio15" value="radio单选项4"/>
    

    //$("input[name='radio15']").eq(0).prop("checked",true);
    //$("input[name='radio15']").eq(0).prop("checked",false);//测试checked可用false,true;
    $("input[name='radio15']").eq(0).prop("disabled",true);
    $("input[name='radio15']").eq(0).prop("disabled",false);//测试disabled可用false,true;

    js操作radio的checked和disabled属性值可用true和false值来代替添加、移除checked属性;但请别给true和false加上引号,引号内为任意值都是给radio添加checked属性;

    参考文档:http://blog.csdn.net/htofly/article/details/7721858

    2、让页面中所有的radio可用。
    $("input:radio").attr("disabled",false);
    3、让页面中所有的radio不可用。
    $("input:radio").attr("disabled","disabled");
    5、让页面中“未选中”状态的radio不可用。
    $("input:radio:not([checked])").attr("disabled","disabled");
    6、遍历选中状态的radio,除了某一个radio之外,其他的“选中”状态的radio设定是“未选中”状态。
    $('input:radio:checked').each(function(i,val){
       if(val.name != "dialCheckResult" ){
         $("input:radio[name='"+val.name+"']:checked").attr('checked',false);
       }
     });
    7、让所有“未选中”状态的radio不可用。
    $("input:radio:not([checked])").attr("disabled","disabled");
    9、让所有“选中”状态的radio置于“未选中”状态。
    $('input:radio:checked').attr('checked',false);
    10、让页面中的radio都置于“选中”状态或“未选中”状态。
    $("input:radio").attr("checked",true);
    $("input:radio").attr("checked",false);

    参考文档:http://www.jb51.net/article/56465.htm

    html内容如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8"/>
      <title>Form表单单选操作示例1</title>
      <style>
        body{font-size:14px;}
        label{display:inline-block;width:8em;margin-left:0.3em;margin-right:0.3em;}
    	input{margin-top:0.3em;margin-bottom:0.3em;}
    	.tipmsg{font-size:14px;color:#f00;}
      </style>
    </head>
    
    <body>
    <form>
      <h2>input单选(radio):相同name的单选项为同一组单选</h3>
      <h3>radio选中某值的项</h3><hr>
      <div>
        <label>input单选1组:</label>
        radio单选项1<input type="radio" name="radio1" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio1" value="radio单选项2"/>
    	<span class="tipmsg">input[name='radio1'][value=radio单选项2]").attr("checked","checked");选中值为"radio单选项2"的项</span>
      </div>
      
      <div>
        <label>input单选2组:</label>
        radio单选项1<input class="radio2" type="radio" name="radio2" value="radio单选项1"/>
    	radio单选项2<input class="radio2" type="radio" name="radio2" value="radio单选项2"/>
    	radio单选项3<input class="radio2" type="radio" name="radio2" value="radio单选项3"/>
    	<span class="tipmsg">$(.radio2[value=val]).attr("checked","checked");选中某值的项</span>
      </div>
      
      <div>
        <label>input单选3组:</label>
        radio单选项1<input id="radio3" type="radio" name="radio3" value="radio单选项1"/>
    	radio单选项2<input id="radio3" type="radio" name="radio3" value="radio单选项2"/>
    	radio单选项3<input id="radio3" type="radio" name="radio3" value="radio单选项3"/>
    	<span class="tipmsg">$(.radio2[value=val]).attr("checked","checked");选中某值的项</span>
      </div>
      
      <div>
        <label>input单选4组:</label>
        radio单选项1<input id="radio3" type="radio" name="radio4" value="radio单选项1"/>
    	radio单选项2<input id="radio3" type="radio" name="radio4" value="radio单选项2"/>
    	radio单选项3<input id="radio3" type="radio" name="radio4" value="radio单选项3"/>
    	<span class="tipmsg">input单选3组已用过id="radio3",该组无法选中单选项</span>
      </div>
      
      <h3>radio选中某索引的项</h3><hr>
      <div>
        <label>input单选5组:</label>
        radio单选项1<input type="radio" name="radio5" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio5" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio5" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio5" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio5']").eq(2).attr("checked","checked");//选中第三项,索引从0开始</span>
      </div>
      
      <div>
        <label>input单选6组:</label>
        radio单选项1<input type="radio" name="radio6" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio6" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio6" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio6" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio6']:first").attr("checked","checked");//选中第一项</span>
      </div>
      
      <div>
        <label>input单选7组:</label>
        radio单选项1<input type="radio" name="radio7" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio7" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio7" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio7" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio7']:last").attr("checked","checked");//选中最后一项</span>
      </div>
      
      <h3>获取radio选中值</h3><hr>
      <div>
        <label>input单选8组:</label>
        radio单选项1<input type="radio" name="radio8" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio8" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio8" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio8" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio8']:checked").val();//获取选中项的值</span>
      </div>
      
      <h3>获取radio选中项的index(index从1开始)</h3><hr>
      <div>
        <label>input单选9组:</label>
        radio单选项1<input type="radio" name="radio9" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio9" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio9" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio9" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio9']:checked").index();//获取选中项的索引(这里用索引似乎也不大恰当,值是从1开始,不是0)</span>
      </div>
      
      <h3>获取radio某值的index</h3><hr>
      <div>
        <label>input单选10组:</label>
        radio单选项1<input type="radio" name="radio10" value="radio单选项1"/>
    	radio单选项2<input type="radio" name="radio10" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio10" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio10" value="radio单选项4" checked="checked"/>
    	<span class="tipmsg">$("input[name='radio10'][value=radio单选项2]").index();//获取radio某值的index()</span>
      </div>
      
      <h3>获取radio某索引对应的值</h3><hr>
      <div>
        <label>input单选11组:</label>
        radio单选项1<input type="radio" name="radio11" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio11" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio11" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio11" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio11']").eq(3).val();//获取radio某索引的值</span>
      </div>
        
      <h3>删除radio某值的项</h3><hr>
      <div>
        <label>input单选12组:</label>
        radio单选项1<input type="radio" name="radio12" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio12" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio12" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio12" value="radio单选项4"/>
    	<span class="tipmsg">$("input[name='radio12'][value=radio单选项2]").remove();//删除值对应的项,后面项的index序号依次减1</span>
      </div>
      
      <h3>禁用radio</h3><hr>
      <div>
        <label>input单选13组:</label>
        radio单选项1<input type="radio" name="radio13" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio13" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio13" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio13" value="radio单选项4"/>
    	<span class="tipmsg"></span>
      </div>
      
      <div>
        <label>input单选14组:</label>
        radio单选项1<input type="radio" name="radio14" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio14" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio14" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio14" value="radio单选项4"/>
    	<span class="tipmsg"></span>
      </div>
      
      <div>
        <label>input单选14组:</label>
        radio单选项1<input type="radio" name="radio14" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio14" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio14" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio14" value="radio单选项4"/>
    	<span class="tipmsg">禁用的radio可用js操作</span>
      </div>
      
      <div>
        <label>input单选15组:</label>
        radio单选项1<input type="radio" name="radio15" value="radio单选项1" checked="checked"/>
    	radio单选项2<input type="radio" name="radio15" value="radio单选项2"/>
    	radio单选项3<input type="radio" name="radio15" value="radio单选项3"/>
    	radio单选项4<input type="radio" name="radio15" value="radio单选项4"/>
    	<span class="tipmsg">js操作radio的checked和disabled属性值可用true和false值来代替添加、移除checked属性;但请别给true和false加上引号,引号内为任意值都是给radio添加checked属性;</span>
      </div>
      
      <div class="tipmsg">
      radio没有readonly属性
      </div>
    
    </form>
    
    <script src="./jquery-1.x.min.js"></script>
    <script>
    $(function(){
      //$("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");
      $("input[name='radio1'][value=radio单选项2]").attr("checked","checked");
      $(".radio2[value=radio单选项3]").attr("checked","checked");
      $("#radio3[value=radio单选项2]").attr("checked","checked");//id必须在同一页面必须是唯一的,但同一单选组
      $("input[name='radio5']").eq(2).attr("checked","checked");
      $("input[name='radio6']:first").attr("checked","checked");
      $("input[name='radio7']:last").attr("checked","checked");
      $("input[name='radio8']").change(function(){
    	var val = $("input[name='radio8']:checked").val();
    	alert(val);
      });
      
      $("input[name='radio9']").change(function(){
    	var val = $("input[name='radio9']:checked").index();
    	alert(val);
      });
      
      var index1 = $("input[name='radio10'][value=radio单选项2]").index();
      //alert("radio10单选组值为‘radio单选项2’的项为:"+index1);//
      
      var val1 = $("input[name='radio11']").eq(3).val();
      //alert("radio11单选组索引3的值为:"+val1);//
      
      //$("input[name='radio12'][value=radio单选项2]").remove();
      var index2 = $("input[name='radio12'][value=radio单选项4]").index();
      //alert(index2);//
      
      //$("input[name='radio13']").eq(2).prop("disabled","disabled");//禁用某项,当然选择器也可以换成某值对应的项;
      $("input[name='radio13']").prop("disabled","disabled");//禁用整组radio
      $("input[name='radio13']").eq(2).attr("checked","checked");//禁用后不可切换选中项,但js可操作
      //$("input[name='radio13']").removeProp("disabled");//移除radio禁用
      
      $("input[name='radio14']").prop("disabled","disabled");
      $("input[name='radio14']").eq(3).attr("checked","checked");
      
      //$("input[name='radio15']").eq(0).prop("checked",true);
      //$("input[name='radio15']").eq(0).prop("checked",false);//测试checked可用false,true;
      $("input[name='radio15']").eq(0).prop("disabled",true);
      $("input[name='radio15']").eq(0).prop("disabled",false);//测试disabled可用false,true;
    });
    </script>
    </body>
    </html>
    展开全文
  • radio类型

    千次阅读 2016-12-12 23:20:23
    如果创建多个radio,并且想要多个radio属于同一个group(即:单选功能),需要设值radio的name属性,并且name具有相同的value,如果不这样设置,则radio具有复选功能。 下面是一个radio的小例子: function ...

    html中的input控件中radio类型的相关设置
    radio包含有id,name,value, checked等属性,如下
    <input type="radio" id="test" name="test" checked="checked">
    如果创建多个radio,并且想要多个radio属于同一个group(即:单选功能),需要设值radio的name属性,并且name具有相同的value,如果不这样设置,则radio具有复选功能。
    <input type="radio" id="test" name="test" value="test 1" >
    <input type="radio" id="test" name="test" value="test 2">
    下面是一个radio的小例子:
    <script type="text/javascript">
    function doclick(){
        String id = document.getElementsByName("test");
        for(var i=0;i<id.length; i++){
            var radio=id[i];
            alert(radio.value);
        }
    }
    </script>
     
    <body>
        <input type="radio" id="test" name="test" value="test 1" > test 1
        <input type="radio" id="test" name="test" value="test 2">  test 2
        <br>
        <input type="button" id="btn"   value = "Select" οnclick="doclick();">
     
    </body>

    点击button之后会依次输出每个radio的value的值。

    在jsp中设置radio的checked属性
    <%
    String test="test 1";
    %>
     
    <input type="radio" id="test" name="test" value="test 1"
     <%=test.equals("test 1")?Checked:""%>> test 1 
    <input type="radio" id="test" name="test" value="test 2"
    <%=test.equals("test 2")?Checked:""%>>  test 2 
    Checked 是checked="checked" 的缩写。这个就可以初始化checked属性。

    展开全文
  • 单选框 radio&lt;div class="radio-inline"&gt; &lt;input type="radio" name="killOrder" value="1"/&gt; &lt;label for="killOrder1"&...

    单选框 radio

    <div class="radio-inline">
      <input type="radio"  name="killOrder" value="1"/>
      <label for="killOrder1"></label>
    </div>
    <div class="radio-inline">
      <input type="radio"  name="killOrder" value="0" checked/>
      <label for="killOrder2"></label>
    </div>

    1.获取值

        $("input[name='killOrder']:checked").val();

        $('input:radio:checked').val();

        $("input[type='radio']:checked").val();

        $(":radio[checked]").each(function(radio){alert($(this).val());

    2.设置第一个Radio为选中值:


        $('input:radio:first').attr('checked', 'checked');


        $('input:radio:first').attr('checked', 'true');

    3.设置最后一个Radio为选中值:


        $('input:radio:last').attr('checked', 'checked');


        $('input:radio:last').attr('checked', 'true');


    4.根据索引值设置任意一个radio为选中值:


        $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....


        $('input:radio').slice(1,2).attr('checked', 'true');


    5.根据Value值设置Radio为选中值


        $("input:radio[value='2']").attr('checked','true');


        $("input[value='1']").attr('checked','true');


    6.删除Value值为2的Radio


    $("input:radio[value='2']").remove();


    7.删除第几个Radio


    $("input:radio").eq(索引值).remove();索引值=0,1,2....


    如删除第3个Radio:$("input:radio").eq(2).remove();


    8.遍历Radio


    $('input:radio').each(function(index,domEle){

         //写入代码

    });


    9.修改单选框样式

    input[type="radio"] + label::before {
        content: "\a0";
        display: inline-block;
        vertical-align: middle;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        text-indent: .15em;
        margin-bottom: 4px;
        border: 1px solid #CCCCCC;
    }
    input[type="radio"]:checked + label::before {
        background-color: #4A90E2;
        background-clip: content-box;
        padding: 2px;
    }
    input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    .radio-inline{
        padding-left: 0;
    }
    input[type=radio][disabled]:checked + label::before{
        background-color:#CCCCCC;
        background-clip: content-box;
        padding: 2px;

    }



    展开全文
  • 单选radio

    2019-05-24 16:56:54
    方法一 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...

    在这里插入图片描述方法一

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .ul-contiener{
                width: 500px;
                margin: 0 auto;
            }
            .question-container{
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            } 
        </style>
    </head>
    <body>
        <ul class="ul-contiener"></ul>
        <div style="text-align: center;margin-top: 20px;">
            <button>打印结果</button>
        </div>
        
    
    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            // 初始数据
            let data = [
                {
                    itemName: "1.我觉得闷闷不乐,情绪低落",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "2.我觉得一天中早晨最好",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "3.我晚上一阵阵哭出来,或者想哭",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "3.我晚上睡眠不好",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                }
            ]
    
            //渲染数据 => 这里不需要看
            render();
            function render() {
                data.forEach(item => {
                    let str = `<li class="question-container">
                                    <div>${item.itemName}</div>
                                    <div>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
                                            <span>${item.scoreInfo[0].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
                                            <span>${item.scoreInfo[1].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
                                            <span>${item.scoreInfo[2].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
                                            <span>${item.scoreInfo[3].scoreName}</span>
                                        </label>
                                    </div>
                                </li>`
                    $(".ul-contiener").append(str);
                })
            }
    
            // 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件 
    
            let flag; //radio点击之前的状态 用来判断是否选中
    
            $("label").on("mousedown",function(){
                flag = $(this).find("input").prop("checked");
                console.log(flag);
            });
    
            //当radio被选中是点击 去掉 选中状态
            $("label").on("click",function(){
             
                if(flag){
                    $(this).find("input").prop("checked",false);
                }
            });
    
            //点击打印结果
            $("button").on("click",function(){
                let checkedRadio = $('input:radio:checked');
    
                console.log(checkedRadio,"checkedRadio");
                console.log(checkedRadio.length,"checkedRadio");
                console.log(data.length,"data");
                let resultArray = []
                for(let i=0;i<checkedRadio.length;i++){
                    resultArray.push({
                        itemName: $(checkedRadio[i]).attr("name"),
                        score: $(checkedRadio[i]).attr("data-score")
                    })
                }
                console.log(resultArray)
            })  
    
    
        })
    </script>
    </body>
    </html>
    
    

    方法2用原生的js

    
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .ul-contiener{
                width: 500px;
                margin: 0 auto;
            }
            .question-container{
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            } 
        </style>
    </head>
    <body>
        <ul class="ul-contiener"></ul>
        <div style="text-align: center;margin-top: 20px;">
            <button>打印结果</button>
        </div>
        
    
    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            // 初始数据
            let data = [
                {
                    itemName: "1.我觉得闷闷不乐,情绪低落",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "2.我觉得一天中早晨最好",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "3.我晚上一阵阵哭出来,或者想哭",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                },
                {
                    itemName: "3.我晚上睡眠不好",
                    scoreInfo: [
                        {scoreName: "偶有", score: 1},
                        {scoreName: "有时", score: 2},
                        {scoreName: "经常", score: 3},
                        {scoreName: "持续", score: 4},
                    ]
                }
            ]
    
            //渲染数据
            render();
            function render() {
                data.forEach(item => {
                    let str = `<li class="question-container">
                                    <div>${item.itemName}</div>
                                    <div>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
                                            <span>${item.scoreInfo[0].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
                                            <span>${item.scoreInfo[1].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
                                            <span>${item.scoreInfo[2].scoreName}</span>
                                        </label>
                                        <label>
                                            <input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
                                            <span>${item.scoreInfo[3].scoreName}</span>
                                        </label>
                                    </div>
                                </li>`
                    $(".ul-contiener").append(str);
                })
            }
    
            // 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件 
    
            let flag; //radio点击之前的状态 用来判断是否选中
            let choose = document.querySelectorAll("label")
            for(let i=0;i<choose.length;i++){
    
                choose[i].addEventListener("mousedown",function(){
                    flag = this.childNodes[1].checked;
                });
    
                //当radio被选中是点击 去掉 选中状态
                choose[i].addEventListener("click",function(){
                    if(flag){
                        this.childNodes[1].checked = false;
                    }
                });
            }
            
            
    
            
    
            //点击打印结果
            let btn = document.querySelector("button");
            btn.addEventListener("click",function(){
                let checkedRadio = document.querySelectorAll('[type="radio"]');
                
                let resultArray = [];
                for(let i=0;i<checkedRadio.length;i++){
                    if(checkedRadio[i].checked){
                        resultArray.push({
                            itemName: checkedRadio[i].getAttribute ("name"),
                            score: checkedRadio[i].getAttribute ("data-score")
                        })
                    }
                }
                console.log(resultArray)
            });
        })
    </script>
    </body>
    </html>
    

    编辑默认选中、

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    <script>
        let data = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 2.我觉得一天之中早晨最好","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"3.我一阵阵哭出来或想哭","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"4.我晚上睡眠不好","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 5.我吃的跟平常一样多","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"7.我发觉我的体重在下降","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"8.我有便秘的苦恼","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"9.我心跳比平时快","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"10.我无缘无故地感到疲乏","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 11.我的脑袋跟平常一样清楚","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 12.我觉得经常做的事情并没困难","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"13.我觉得不安而平静不下来","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 14.我对将来抱有希望","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"15.我比平常容易生气激动","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 16.我觉得做出决定是容易的","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 18.我的生活过的很有意思","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"19.我认为如果我死了别人会生活地更好些","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]}]
        let backData = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","score":"1"},{"itemName":"* 2.我觉得一天之中早晨最好","score":"3"},{"itemName":"3.我一阵阵哭出来或想哭","score":"3"},{"itemName":"4.我晚上睡眠不好","score":"3"},{"itemName":"* 5.我吃的跟平常一样多","score":"3"},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","score":"2"},{"itemName":"7.我发觉我的体重在下降","score":"3"},{"itemName":"8.我有便秘的苦恼","score":"3"},{"itemName":"9.我心跳比平时快","score":"3"},{"itemName":"10.我无缘无故地感到疲乏","score":"3"},{"itemName":"* 11.我的脑袋跟平常一样清楚","score":"2"},{"itemName":"* 12.我觉得经常做的事情并没困难","score":"2"},{"itemName":"13.我觉得不安而平静不下来","score":"3"},{"itemName":"* 14.我对将来抱有希望","score":"1"},{"itemName":"15.我比平常容易生气激动","score":"4"},{"itemName":"* 16.我觉得做出决定是容易的","score":"2"},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","score":"1"},{"itemName":"* 18.我的生活过的很有意思","score":"2"},{"itemName":"19.我认为如果我死了别人会生活地更好些","score":"4"},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","score":"1"}]
    
        for(let i=0; i<data.length; i++){
    
            for(let k=0; k<data[i].scoreInfo.length; k++){
    
                if(data[i].scoreInfo[k].score === Number(backData[i].score)){
                    data[i].scoreInfo[k].isChecked = true;
                }else{
                    data[i].scoreInfo[k].isChecked = false;
                }
            }
        }
    
        console.log("backData",backData);
        console.log("data",data);
    </script>
    </body>
    </html>
    
    
    
    展开全文
  • RadioButtn单选按钮详解

    2018-12-06 09:52:47
    RadioButtn单选按钮,常用UI控件之一
  • html中radio、checkbox选中状态研究

    万次阅读 多人点赞 2018-05-19 17:12:12
    我们在web页面开发中经常需要让单选框、复选框进行选中或者不选中的操作,我们知道要让单选框或者复选框默认选中就需要添加checked属性,但是我们在js中使用jquery的attr可以在dom中添加checked属性但是页面却没有...
  • 微信小程序组件_小程序表单组件_radio radio-group 单项选择器,内部由多个&lt;radio/&gt;组成。 属性名 类型 默认值 说明 bindchange EventHandle   &lt;radio-group/&gt;...
  • Vue中的radio的使用方法

    万次阅读 2018-06-18 16:00:28
    &lt;html&gt;&lt;head&gt; &lt;script src='js/vue.js'&gt;&lt;/script&gt;&lt;/head&...input type='radio' id='wuhan' value='武汉' v-model='city'/&
  • radio

    2020-09-24 17:03:43
    document.getElementById("linkType1").checked = true; //可以动态切换 $('#linkType1').checked = true; //不行 $('#linkType1').attr('checked',true);
  • jquery 根据值设置radio选中,获取选择的值

    万次阅读 多人点赞 2018-08-20 16:19:24
    百度到了很多种,基本没几个能用的,是因为浏览器版本的问题。试了多次,找到一个可...man_radio" type="radio" value="1" checked="checked" /><label>男</label>
  • Jquery 获取 radio选中值

    万次阅读 2012-07-06 13:08:41
    随着Jquery的作用越来越大,使用的朋友也越来越多。在Web中,由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快,代码的写法...Radio
  • 纯css美化radio选择框的样式

    万次阅读 2018-05-10 10:44:24
    效果图如下: ...radio" name="1" id="" class="a-radio"&gt; &lt;span class="b-radio"&gt;&lt;/span&gt;好 &lt;/label
  • input中radio对象的使用、获取方法

    万次阅读 2018-05-07 21:41:18
    input 中 radio 对象的使用方法 radio 对象 radio 是单选按钮属性 radio 使用方式 基本使用方式 &lt;input type="radio" name="radio" value="1" /&gt; ...
  • 使用el-radio-group需要注意的地方

    万次阅读 2019-04-10 17:35:14
    el-radio-group v-model="radio2"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio...
  • JS 控制 radio 选中

    千次阅读 2019-03-13 09:42:00
    一、控制radio选中 HTML: &lt;div class="gender"&gt; &lt;input type="radio" name="gender" value="男" title="男" checked id="gender1&...
  • js获取和设置radio的值

    万次阅读 2018-08-01 17:25:36
    &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...获取radio的值&amp;lt;/title&
  • javascript 获取表单中radio选中值

    万次阅读 2015-03-20 22:58:56
    radio是form表单中非常常用的一种表单元素,对于radio的操作中,都是利用radio的checked属性,都是对radio的checked属性做操作。获取radio的选中值时,遍历radio按钮项,找到被选中(checked)的状态的那个按钮,...
  • js动态选中radio,获取radio选中值

    千次阅读 2019-06-22 09:29:03
    //动态选中radio值,1:表示radio的name 2:表示后台传过来的radio值$(":radio[name='1'][value='" + 2 + "']").prop("checked", "checked");//获取radio选中值,1:表示radio的name$('input[name="1"]:checked')....
  • RADIO技术(软件阵列/硬件阵列)的目的是提高磁盘读写的速度和安全性由于软件的可靠性是建立的操作系统上的所以以软件方式实现磁盘阵列安全性较低现在已经很少有人使用,大部分都是采用硬件实现阵列,主流服务器都...
  • jQuery为radio赋值

    千次阅读 2017-05-24 18:53:32
    今天下午遇到的坑,天大的坑啊,表单clear后,radio赋值无效。去除clear后却可。我用的以下方法尝试,都失败。最终问了项目经理,用末尾方法实现了。 以下方法 //取radio的值 $("input[name='radioName']...
1 2 3 4 5 ... 20
收藏数 188,817
精华内容 75,526
关键字:

radio