在div中显示多个选择框和单选按钮值

时间:2015-07-16 08:54:26

标签: javascript jquery html css

我有一个网站,允许用户“猜测/预测”体育比赛的结果

为了让您了解我想要实现的目标,请查看以下图片:

enter image description here

选定的小组会显示在页面底部(正如您在图片的底部圆圈中看到的那样)

我想做什么

我试图修改脚本,不仅在页面底部显示选定的团队,而且 也是选定的分数

示例

12岁以下的酋长

Have a look at my fiddle了解我在做什么,如果有人可以帮我修改我的脚本以包含分数,那将非常感激

我的代码:

$(document).ready(function() {
  $(':radio').change(function(e) {
    //clear the div
    $('#dispPicks').html('');
    //update the div
    $(':radio:checked').each(function(ind, ele) {
      $('#dispPicks').append($(ele).val() + '<br/>');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />

<select>
  <option value="">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
  <option value="">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
  <option value="">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<div id="dispPicks"></div>

Fiddle Link

3 个答案:

答案 0 :(得分:6)

您可以在div中放置相关的单选按钮并选择框,然后为其分配一个类,让我们说team,然后读取选中的单选按钮和选中框的值,与选中的收音机相同按钮belogs到。见下面的代码 -

HTML

<div class="team">
    <input type="radio" name="foo" value="Shaks" />
    <input type="radio" name="foo" value="Hurricanes" />
    <input type="radio" name="foo" value="Draw" />

    <select>
            <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
    </select>

    <br/>
</div>
<div class="team">
    <input type="radio" name="bar" value="Crusaders" />
    <input type="radio" name="bar" value="Pioneers" />
    <input type="radio" name="bar" value="Draw" />
    <select>
            <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
    </select>

    <br/>
</div>
<div class="team">
    <input type="radio" name="wow" value="Chelsea" />
    <input type="radio" name="wow" value="Liverpool" />
    <input type="radio" name="wow" value="Draw" />
    <select>
            <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
    </select>
</div>
<div id="dispPicks"></div>

JQuery的

$(document).ready(function () {
    $(':radio, select').change(function (e) {
        //clear the div
        $('#dispPicks').html('');
        //update the div
        $(':radio:checked').each(function (ind, ele) {
            var selectBoxVal = $(this).closest('div.team').find('select').val();
            selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
            $('#dispPicks').append($(ele).val() +"  "+selectBoxVal+ '<br/>');
        });
    });
});

<强> JSfiddle Demo

答案 1 :(得分:2)

我做了一些我认为必不可少的修改:

1。,因为一支球队无法以0的分数获胜,0是在选择框之外

2。我根据其单选按钮的名称为所有select代码data-name提供了

然后我们去 DEMO

$(document).ready(function () {
    $(':radio, select').change(function (e) {
        //clear the div
        $('#dispPicks').html('');
        //update the div
        $(':radio:checked').each(function (ind, ele) {
            var name=$(this).attr('name');
            if($(this).val()=='Draw'){
                $('#dispPicks').append($(ele).val());
            }
            else{
                $('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
            }
        });
    });
});

答案 2 :(得分:1)

我认为你要使用更多的id和名字。 这就是我为你所做的,让你理解我的意思是基本的:

 $(':radio').change(function(e) {
   x = $(this).attr('name');
   y = $('input[name=' + x + ']:checked').val();
   $("#" + x).html(y);
 });

 $("select").change(function() {
   x = $(this).attr('name');
   y = $(this).val();
   $("#" + x).html(" by " + y);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
  <option value="">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
  <option value="">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<div id="picks">
  <br /><span id="pick1"></span><span id="howMuch1"></span>

  <br /><span id="pick2"></span><span id="howMuch2"></span>

</div>

在事件(变更)上我们使x成为我们的目标而y是我们的价值..休息是一个正确的情况;)