Javascript 如何从每个段落中仅选择一个复选框？_Javascript_Jquery_Html_Jquery Ui_Checkbox

Javascript 如何从每个段落中仅选择一个复选框？

javascript jquery html jquery-ui checkbox

Javascript 如何从每个段落中仅选择一个复选框？,javascript,jquery,html,jquery-ui,checkbox,Javascript,Jquery,Html,Jquery Ui,Checkbox,我正在处理html调查页面，要求从每行调查中仅选择1个复选框，调查选项可能不同，请参见下面的屏幕和html：使用的HTML 如何解决此问题？使用而不是但要修复jQuery，请使用.sides（）而不是。而不是（此）使用而不是但要修复jQuery，请使用.sides（）而不是。而不是（此）在多个选项中仅选择一个选项，而不是使用复选框使用收音机，并为属于同一类别的所有收音机指定相同的名称，以便一次只能检查一个收音机例：主题1 一个两个专题2 一个两个要在多个选项中仅选择一个选

我正在处理html调查页面，要求从每行调查中仅选择1个复选框，调查选项可能不同，请参见下面的屏幕和html：

使用的HTML 如何解决此问题？

使用

而不是

但要修复jQuery，请使用

.sides（）

而不是

。而不是（此）

使用

而不是

但要修复jQuery，请使用

.sides（）

而不是

。而不是（此）

在多个选项中仅选择一个选项，而不是使用

复选框使用收音机，并为属于同一类别的所有收音机指定相同的名称，以便一次只能检查一个收音机
例：

主题1
一个
两个

专题2
一个
两个
要在多个选项中仅选择一个选项，而不是使用复选框
使用收音机
，并为属于一个类别的所有收音机指定相同的名称，以便一次只能检查一个收音机
例：

主题1
一个
两个

专题2
一个
两个
注意：-实际上最好使用单选按钮，然后不需要jQuery
但如果要使用复选框和jQuery，请执行以下操作：-

$（函数（）{
$（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parent（）.sides（）.children（“输入：复选框”）.prop（'checked'，false）；
}
});
})

1.我对我使用的计算机的质量、可靠性和速度感到满意。
强烈同意
同意
不同意
非常不同意
2.当前安装在我计算机上的软件足以满足我的工作功能。
强烈同意
同意
不同意
非常不同意
注意：-实际上最好使用单选按钮，然后不需要jQuery
但如果要使用复选框和jQuery，请执行以下操作：-

$（函数（）{
$（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parent（）.sides（）.children（“输入：复选框”）.prop（'checked'，false）；
}
});
})

1.我对我使用的计算机的质量、可靠性和速度感到满意。
强烈同意
同意
不同意
非常不同意
2.当前安装在我计算机上的软件足以满足我的工作功能。
强烈同意
同意
不同意
非常不同意
尝试此代码100%工作：
演示：

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="firstrow"><div class="srno"><p>1.</p></div><div class="survey"><span>I am satisfied with the quality, reliability and speed of the computer I use.</span></div></div>
    <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
<div class="firstrow"><div class="srno"><p>2.</p></div><div class="survey"><span>The Software currently installed on my computer is adequate for my job function.</span></div></div>
   <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
</body>
</html>

<script>
$(function () {
   $('input:checkbox').click(function () {
      if ($(this).is(':checked')) {
          $(this).closest('.options').find('input:checkbox').not(this).prop('checked', false);
       }
   });
})
</script>


JS-Bin
1.我对我使用的计算机的质量、可靠性和速度感到满意。
强烈同意
同意
不同意
非常不同意
2.当前安装在我计算机上的软件足以满足我的工作功能。
强烈同意
同意
不同意
非常不同意

JavaScript:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="firstrow"><div class="srno"><p>1.</p></div><div class="survey"><span>I am satisfied with the quality, reliability and speed of the computer I use.</span></div></div>
    <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
<div class="firstrow"><div class="srno"><p>2.</p></div><div class="survey"><span>The Software currently installed on my computer is adequate for my job function.</span></div></div>
   <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
</body>
</html>

<script>
$(function () {
   $('input:checkbox').click(function () {
      if ($(this).is(':checked')) {
          $(this).closest('.options').find('input:checkbox').not(this).prop('checked', false);
       }
   });
})
</script>


$（函数（）{
$（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this）.closest（'.options'）.find（'input:checkbox'）。not（this）.prop（'checked'，false）；
}
});
})
尝试此代码100%工作：
演示：

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="firstrow"><div class="srno"><p>1.</p></div><div class="survey"><span>I am satisfied with the quality, reliability and speed of the computer I use.</span></div></div>
    <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
<div class="firstrow"><div class="srno"><p>2.</p></div><div class="survey"><span>The Software currently installed on my computer is adequate for my job function.</span></div></div>
   <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
</body>
</html>

<script>
$(function () {
   $('input:checkbox').click(function () {
      if ($(this).is(':checked')) {
          $(this).closest('.options').find('input:checkbox').not(this).prop('checked', false);
       }
   });
})
</script>


JS-Bin
1.我对我使用的计算机的质量、可靠性和速度感到满意。
强烈同意
同意
不同意
非常不同意
2.当前安装在我计算机上的软件足以满足我的工作功能。
强烈同意
同意
不同意
非常不同意

JavaScript:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="firstrow"><div class="srno"><p>1.</p></div><div class="survey"><span>I am satisfied with the quality, reliability and speed of the computer I use.</span></div></div>
    <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
<div class="firstrow"><div class="srno"><p>2.</p></div><div class="survey"><span>The Software currently installed on my computer is adequate for my job function.</span></div></div>
   <div class="options">
        <span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
        <span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
        <span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
    </div>
</body>
</html>

<script>
$(function () {
   $('input:checkbox').click(function () {
      if ($(this).is(':checked')) {
          $(this).closest('.options').find('input:checkbox').not(this).prop('checked', false);
       }
   });
})
</script>


$（函数（）{
$（“输入：复选框”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this）.closest（'.options'）.find（'input:checkbox'）。not（this）.prop（'checked'，false）；
}
});
})
试试这个，它肯定会有用
$('input:checkbox').click(function () {
  if ($(this).is(':checked')) {
      $(this).parent().siblings().children().prop('checked', false);
   }
});

试试这个，它肯定会有用的
$('input:checkbox').click(function () {
  if ($(this).is(':checked')) {
      $(this).parent().siblings().children().prop('checked', false);
   }
});

你为什么不用单选按钮代替复选框？你不能用单选按钮吗？你为什么不用单选按钮代替复选框？你不能用单选按钮吗？是的，它可以工作。我必须坚持我只使用复选框的设计。虽然使用定量按钮是实现这一点的经典方法。@RishiJagati很高兴帮助你：）：）是的，它很有效。我必须坚持我只使用复选框的设计。尽管使用定量按钮是实现这一点的经典方法。@RishiJagati很高兴帮助您：）：）